sass 注释
//定义一个占位符 （此注释不会在编译出来的css中显示）%mt5 { margin-top: 5px;}/*调用一个占位符*/ （此注释会在编译出来的css中显示）.box { @extend %mt5;}编译出来的css.box { margin-top: 5px;}/*调用一个占位符*/ sass 加法
.box { width: 20px + 8in;}编译出来的 CSS:.box { width: 788px;}但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：.box { width: 20px + 1em;}编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.” sass 减法
$full-width: 960px;$sidebar-width: 200px;.content { width: $full-width - $sidebar-width;}编译出来的 CSS 如下：.content { width: 760px;}同样的，运算时碰到不同类型的单位时，编译也会报错，如：$full-width: 960px;.content { width: $full-width - 1em;}编译的时候，编译器报“Incompatible units: 'em' and ‘px’.”错误。 sass 乘法
.box { width:10px * 2px; }编译的时候报“20px*px isn't a valid CSS value.”错误信息。如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：.box { width: 10px * 2;}编译出来的 CSS:.box { width: 20px;}sass 的乘法运算和加法、减法运算一样，在运算中有不用类型的单位时，也将会报错。 sass 除法
.box { width: (100px / 2); //外面需添加一个小括号}另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：$width: 1000px;$nums: 10;.item { width: $width / 10; }.list { width: $width / $nums;}编译出来的CSS:.item { width: 100px;}.list { width: 100px;} sass 变量计算
$content-width: 720px;$sidebar-width: 220px;$gutter: 20px;.container { width: $content-width + $sidebar-width + $gutter; margin: 0 auto;}编译出来的CSS.container { width: 960px; margin: 0 auto;} sass 数字运算
.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }编译后的css (普通数学运算).box { width: 60px;} sass 颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：p { color: #010203 + #040506;}计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：如此编译出来的 CSS 为：p { color: #050709;}算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：p { color: #010203 * 2;}计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：p { color: #020406;} sass 字符运算
在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如：$content: "Hello" + "" + "Sass!";.box:before { content: " #{$content} ";}编译出来的CSS：.box:before { content: " Hello Sass! ";}除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：div { cursor: e + -resize;}编译出来的CSS:div { cursor: e-resize;}注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：p:before { content: "Foo " + Bar; font-family: sans- + "serif";}编译出来的 CSS：p:before { content: "Foo Bar"; font-family: sans-serif; } sass 声明变量
$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7/*如果值后面加上!default则表示默认值。*/
sass 普通变量与默认变量
普通变量定义之后可以在全局范围内使用。$fontSize: 12px;body{ font-size:$fontSize;}编译后的css代码：body{ font-size:12px;}默认变量sass 的默认变量仅需要在值后面加上 !default 即可。 sass 变量的调用
定义变量$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color: #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;在按钮 button 中调用，可以按下面的方式调用.btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border;}编译后的css:.btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4;} sass 局部变量和全局变量
$color: orange !default; //定义全局变量.block { color: $color; //调用全局变量}em { $color: red; //定义局部变量 a { color: $color; //调用局部变量 }}span { color: $color; //调用全局变量} sass 选择器嵌套
假设我们有一段这样的结构：那么在 Sass 中，就可以使用选择器的嵌套来实现：nav { a { color: red; header & { color:green; } } }
sass 属性嵌套
.box { border-top: 1px solid red; border-bottom: 1px solid green;}在 Sass 中我们可以这样写：.box { border: { //需加上冒号 top: 1px solid red; bottom: 1px solid green; }} sass 伪类嵌套
.clearfix{ &:before,&:after { content:""; display: table; }&:after { clear:both; overflow: hidden; }}编译后的css:clearfix:before, .clearfix:after { content: ""; display: table;}.clearfix:after { clear: both; overflow: hidden;} sass 混合宏-声明混合宏
1.声明混合宏
不带参数混合宏：
在 Sass 中，使用“@mixin”来声明一个混合宏。如：
@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;} 其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。
2.带参数混合宏：
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：
@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius;} 3.复杂的混合宏：
上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); }} 这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。
sass 混合宏-调用混合宏
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：button { @include border-radius;}这个时候编译出来的 CSS:button { -webkit-border-radius: 3px; border-radius: 3px;} sass 混合宏的参数--传一个不带值的参数
在混合宏中，可以传一个不带任何值的参数，比如：
@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius;} 在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。
在调用的时候可以给这个混合宏传一个参数值：
.box { @include border-radius(3px);} 这里表示给混合宏传递了一个“border-radius”的值为“3px”。
编译出来的 CSS:
.box { -webkit-border-radius: 3px; border-radius: 3px;} sass 混合宏的参数 -- 传一个带值的参数
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius;}在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:.btn { @include border-radius;}编译出来的 CSS:.btn { -webkit-border-radius: 3px; border-radius: 3px;}但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：.box { @include border-radius(50%);}编译出来的 CSS:.box { -webkit-border-radius: 50%; border-radius: 50%;} sass 混合宏的参数 -- 传多个参数
@mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2;}在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：.box-center { @include center(500px,300px);}编译出来 CSS:.box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px;}有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：@mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; }}在实际调用中：.box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));}编译出来的CSS:.box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);} sass 混合宏的参数 -- 混合宏的不足
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如：
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}.box { @include border-radius; margin-bottom: 5px;}.btn { @include border-radius;} 示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS：
.box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px;}.btn { -webkit-border-radius: 3px; border-radius: 3px;} 上例明显可以看出，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。
sass 扩展/继承
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
//SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff; @extend .btn;}.btn-second { background-color: orange; color: #fff; @extend .btn;} 编译出来后的css:
//CSS.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff;}.btn-second { background-clor: orange; color: #fff;} 从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：
.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;} sass 占位符%placeholder
通过@extend调用
//SCSS%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}.btn { @extend %mt5; @extend %pt5;}.block { @extend %mt5; span { @extend %pt5; }} 编译后的css
//CSS.btn, .block { margin-top: 5px;}.btn, .block span { padding-top: 5px;} 附一个关于阮一峰对sass用法的详解：http://www.ruanyifeng.com/blog/2012/06/sass.html