sass入门篇
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 选择器嵌套
假设我们有一段这样的结构： <header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header> 那么在 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
