标签：order 好的 log 之间 ... play highlight tar 定义
嵌套：
1.选择器嵌套；
2.属性嵌套;
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
3.伪类嵌套；
.box:before {
content: "伪元素嵌套";
}
.box{
&:before {
content:"伪元素嵌套";
}
}
4.跳出嵌套；@at-root
跳出嵌套
body{
@at-root .container{
width: 20px;
}
}
混合宏：
在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏
@mixin border-rad($rad1...){
-webkit-border-radius:$rad1;
-moz-border-radius:$rad1;
-o-border-radius:$rad1;
-ms-border-radius:$rad1;
border-radius:$rad1;
}
.box4{
@include border-rad(36px 30px 10px red,2px 5px 6px red);
}
继承：在 Sass 中也具有继承一说，继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
.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; } 效果： .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }
占位符：Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 效果： .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }
插值：
$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); } //它可以让变量和属性工作的很完美，上面的代码编译成 CSS： .login-box { margin-top: 14px; padding-top: 14px; }
@mixin asd($wid,$hei,$classname,$bg,$name){
#{$name}:$wid;
height:$hei;
.#{$classname}{
#{$bg}:red;
}
}
运算：
.box { width: 20px + 30px; } 效果： .box { width: 50px; }
.box { width: 20px - 30px; } 效果： .box { width: -10px; }
.box { width: 20px * 30px; } 效果： .box { width: 600px; }
注意运算符之间要用空格隔开；
函数：
颜色函数：
body{ color: rgb(255,0,200); } body{ $color: rgb(255,0,200); color: $color; background-color: rgba($color,0.5); } p{ color: darken($color, 2); background-color: lighten($color,0.5); }
str-length(),str-index();
z-index:str-length("aaaaa");得到的结果是，Z-index：5；
z-index：str-index("abcdfedd",c);得到的结果是，Z-index：3；
自定义函数：
@function double($width){
@retrun $width * 2;
}
控制命令：
//@if @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } 编译出来的CSS: .block { display: block; } .hidden { display: none; } @debug报错时调试 //@for @for $i from <start> through <end> @for $i from <start> to <end> $i 表示变量 start 表示起始值 end 表示结束值 关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。 @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } 编译出来的 CSS: .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } //@while $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; } 编译出来的 CSS .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; } //@each $k: 1; @each $c in blue, yellow, gray{ .div#{$k}{ color: $c; } $k: $k + 1; } @each $key,$value in (a: blue, b: yellow, c: gray){ .class#{$key}{ color: $value; } }
标签：order 好的 log 之间 ... play highlight tar 定义
原文地址：http://www.cnblogs.com/hl2016-10-28/p/6017126.html
