| 文章简介：其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和css一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。我们这里讨论的如无特殊说明，全指scss。 |
什么是sass?
Sass是是一种基于ruby编写的CSS预处理器，诞生于2007年，是最早也是最成熟的一款CSS预处理器语言，它可以使用变量、嵌套、混入、继承，运算，函数等功能，使得CSS的开发，变得简单清晰可维护，同时也大大节省了设计者的时间，提高了效率。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。我们这里讨论的如无特殊说明，全指scss。
为什么是sass？
sass虽然是最早的，但是一开始还是不太好用，而且使用缩进作为分隔符，不符合css使用大括号的习惯，所以less以后起之秀的身份轻松赢得了人心，后来sass借鉴于less的一些思想，改进了自己的设计，并有了scss，然后经过几个版本的更新，特别版本3.2.0做了些革命性的更新，以使它从其他几个编译处理器中脱颖而出。下面我们抽几个优秀的思想一起看下。
- 默认变量：sass版本3.0引入了默认变量!default，使变量更好控制。
- @content：sass版本3.2.0对mixin进行了补充，以使其可以接受一整块样式，大多应用在css3的@media情况下。
- 占位选择器%：sass版本3.2.0引入了占位选择器%，对于不传递参数的mixin，以后都可以考虑使用它，因为有两个优点——不调用就不会产生css；解析的css是以组合方式申明的，而不是mixin的拷贝方式。
- 变量参数：sass版本3.2.0对变量参数进行了补充，使其可以设置css3的多个属性值的参数，如box-shadow，transition它们都可以拥有多个值，并以逗号隔开。而mixin的参数本来就是以逗号分开的，所以这样一来对css3定义些mixin就会报错，于是有了变量后面加三个点来表示这个参数是表示可以传递多个值的。
目前来说，sass的库也是最多的，在方便我们学习的同时，也从另一方面表明其优越性。
sass语法
sass有两种后缀名文件：一种后缀名为sass；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号包裹的。而本教程中所说的所有sass文件都指后缀名为scss的文件。
导入
sass的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import 'reset.css'，那效果跟普通CSS导入样式文件一样，不会合并到一个文件。然后所有的sass导入文件都可以忽略后缀名.scss。
PS：一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，如可写成@import "mixin"
被导入sass文件a.scss：
//a.scss //------------------------------- body { background: #eee; }
需要导入样式的sass文件b.scss：
@import "reset.css"; @import "a"; p{ background: #0982c1; }
转译出来的b.css样式：
@import "reset.css"; body { background: #eee; } p{ background: #0982c1; }
根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。
注释
sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，不过这种单行注释不会被转译出来。
标准的css注释
/* *我是css的标准注释 *设置body内距 */ body{ padding 5px }
//双斜杆单行注释
单行注释跟JavaScript语言中的注释一样，使用又斜杠（//），但单行注释不会输入到CSS中。
//我是双斜杠表示的单行注释 $mainColor: #369; //定义主体颜色
变量
在sass中你也可以声明变量，并在整个样式表中使用。sass支持任何变量（例如：颜色、数值、文本等）。然后你可以在任意地方引用变量。
sass声明变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。一般我们定义的变量都为属性值，可直接使用，当然变量还有另外一种用法，以#{$variables}形式插入。
//sass style //------------------------------- //声明变量
$baseLineHeight: 1.6;
$baseFontSize: 14px
!default; $baseLineHeight: 1.5
!default; $bodyBgColor: #fff
!default; $textColor: #333 !default; $borderDirection: top
!default; //调用变量
body { font-size: $baseFontSize; line-height: $baseLineHeight; background-color:$bodyBgColor; color:$textColor; }
.border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; }
//css style //-------------------------------
body { font-size: 14px; line-height: 1.6; color:#333; background-color:#fff; }
.border-top{ border-top:1px solid #ccc; }
上面的变量我们使用了默认定义，但是对于line-height我们除默认值之外我们又定义了一个，所以实际解析的时候应用了我们重新定义的，而不是默认值。这种设计方案在引入一些基础sass文件很受用,我们不必修改引入的基本文件，而是直接在引入文件之前，重新定义下我们需要改变的变量就ok了。
除此之外，一个变量可以包含多个值，然后通过nth($variables,index)来调用其中的某个值
//sass style //------------------------------- $linkColor:
#08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{ color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2); } }
//css style //-------------------------------
a{ color:#08c; } a:hover{ color:#333; }
嵌套(Nesting)
sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增加了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器
//sass style //-------------------------------
#top_nav{ line-height: 40px;
text-transform: capitalize; background-color:#333;
li{ float:left; } a{ display: block;
padding: 0 10px;
color: #fff;
&:hover{ color:#ddd;
} } } //css style //-------------------------------
#top_nav{
line-height: 40px; text-transform: capitalize; background-color:#333; }
#top_nav li{ float:left; }
#top_nav a{ display: block; padding: 0 10px; color: #fff; }
#top_nav a:hover{ color:#ddd; }
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：
//sass style //-------------------------------
.fakeshadow {
border: { style: solid; left: { width: 4px; color: #888; }
right: { width: 2px; color: #ccc; } } }
//css style //-------------------------------
.fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
当然这只是个属性嵌套的例子，如果实际这样使用，那估计得疯掉。
混合(mixin)
mixin是sass中最强大的特性，他可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。在sass中，可以为公用的CSS样式定义一个mixin，然后在需要使用这些样式的地方直接调用定义好的mixin。当然mixin最强大的部分还在于它可以传递参数。
sass中声明一个mixins时需要使用@mixin，然后后面紧跟mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用$符号开始，而且和参数值之间需要使用冒号（：）分开，多个参数以逗号分开。这里又有另外一种情况，那就是如果一个属性值可以有多个值，如box-shadow和transition等，那么我们的参数就可以用变量名加三个点表示，如$variables...。
声明mixins（@mixin）
//mixin opacity 默认透明度为50% @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); }
//box-shadow可以有多个值，所以在变量参数后面添加... @mixin box-shadow($shadow...) { -moz-box-shadow:$shadow; box-shadow:$shadow; }
调用mixins（@include）
在选择器调用定义好的mixins需要使用@include，然后在其后紧跟要调用的mixins名。如果使用默认的参数值，则可以省略括号。
//sass style //-------------------------------
.opacity{ @include opacity; } .opacity-80{ @include opacity(80); }
.box{ border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); }
#logo{ @include box-shadow(0 5px 5px rgba(0,0,0,.3)); &:hover{ @include opacity; } }
//css style //-------------------------------
.opacity{ opacity:0.5; filter: alpha(opacity=50); }
.opacity-80{ opacity:0.8; filter: alpha(opacity=80); }
.box{ border:1px solid #ccc; -moz-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); }
#logo{ -moz-box-shadow:0 5px 5px rgba(0,0,0,.3);
box-shadow:0 5px 5px rgba(0,0,0,.3); }
#logo:hover{ opacity:0.5; filter: alpha(opacity=50); }
从上面实例中可以看出：1、opacity和logo hover都调用了@include opacity;，但是解析出来的样式并没有组合声明；2、box-shadow这个mixin使用了变量后面加三个点来传递参数，以适用它可以申明多个值。
@content
又是css3的出现带来一些麻烦，而@content就是从sass3.2.0开始引入来解决css3的@media样式麻烦的。它可以使mixin接受一整块样式，接受的样式从@content开始。
//sass style //-------------------------------
@mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } }
@include max-screen(480px) { body { color: red } } //css style //-------------------------------
@media only screen and (max-width: 480px) { body { color: red } }
PS：mixin所定义出来的样式，通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承是以联合申明的方式存在的，所以从3.2.0版本以后，建议传递参数的用mixin，而非传递参数类的使用下面的继承
继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合申明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。
//sass style //-------------------------------
h1{ border: 4px solid #ff9aa9; }
.speaker{ @extend h1; border-width: 2px; }
//css style //-------------------------------
h1,.speaker{ border: 4px solid #ff9aa9; }
.speaker{ border-width: 2px; }
占位选择器
从sass 3.2.0以后就可以定义占位选择器%，这种选择器的优势在于——如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，直接跟名字
//sass style //-------------------------------
%ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; }
%clearfix{ @if $lte7 { *zoom: 1; } &:before,
&:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } }
#header{ h1{ @extend %ir; width:300px; } }
.ir{ @extend %ir; }
//css style //-------------------------------
#header h1, .ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; }
#header h1{ width:300px; }
如上代码，定义了两个占位选择器%ir和%clearfix，其中clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以以后要定义一些基础的样式文件时候，可以使用占位选择器。
运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
$baseFontSize: 14px !default; $baseLineHeight: 1.5 !default; $baseGap:
$baseFontSize * $baseLineHeight !default; $halfBaseGap:
$baseGap / 2 !default; $samllFontSize: $baseFontSize - 2px !default;
//grid $_columns: 12 !default;
// Total number of columns $_column-width: 60px !default;
// Width of a single column $_gutter: 20px !default;
// Width of the gutter $_gridsystem-width: $_columns * ($_column-width + $_gutter);
//grid system width
函数
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
//sass style //-------------------------------
$baseFontSize: 10px !default; $gray:
#ccc !defualt;
// pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; }
body{ font-size:$baseFontSize; color:lighten($gray,10%); }
.test{ font-size:pxToRem(16px); color:darken($gray,10%); }
//css style //-------------------------------
body{ font-size:10px; color:#E6E6E6; } .test{ font-size:1.6rem; color:#B3B3B3; }
关于颜色函数可以在上面提的sass fuction前面的几个都是颜色方面的函数，分为RGBA Functions,HSL Functions,Opacity Functions,Other Color Functions。建议其他的函数可以浏览器下，大概了解下有这么个东西，以后可以方便查阅。
变量范围
sass的变量范围比较容易混淆，一句话来说就是——如果定义了个全局变量，然后在某个选择器中重新覆盖了，那么后面所有的这个变量都是那个覆盖的值。而如果没有在全局里面定义，只在选择器里面定义某个变量，外面是无法调用的。还有一种特殊情况就是拥有!default默认值的变量，它会先找全局有没有重新定义，如果没有则使用默认值，如有则使用重新定义的值。
//sass style //------------------------------- $color:#fff;
.test{ $color:red; color:$color; } .test2{ color:$color; }
//css style //------------------------------- .test { color: red; } .test2 { color: red; }
从上面可以看出，$color在test里面重新定义了下，在test2里面得到的是重新定义后的值，也就是全局变量的$color经过test里面的局部定义之后，值会改变。这就是很多人所说的sass没有全局变量和局部变量之分，当然事实并非如此。这里会给你一个详细的解答：Sass variable default scope
其他
条件判断
@if可一个条件单独使用，也可以和@else结合多条件使用
//sass style //-------------------------------
$type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; }
@else if $type == monster { color: green; } @else { color: black; } }
//css style //------------------------------- p { color: green; }
for循环
for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
//sass style //-------------------------------
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
//css style //-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; } .item-3 { width: 6em; }
sass中的三目判断
if($condition, $if_true, $if_false) ，三个参数分别表示条件，条件为真的值，条件为假的值。
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px
欢迎大家阅读《CSS预处理器语言sass语法:学习sass语法…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：CSS预处理器语言sass语法:学习sass语法_css
