1、@if
混合宏定义中
book.scss
@mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}";//@debug;@warn,@error display: block; } @else { @debug "$boolean is #{$boolean}";//#{} 插值 会执行 display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); }
执行 sass --watch E:\sass/book.scss:E:\sass/books.css
books.css
.block { display: block; } .hidden { display: none; }
book.scss 中@ debug的作用实际上会在Ruby命令行 打印信息
E:\sass/book.scss:3 DEBUG: $boolean is true
E:\sass/book.scss:7 DEBUG: $boolean is false
相应@warn提示警告,@error报错不能编译
2、@for
@for $i start through/to end
$i变量(固定),through包括end,to反之
book.scss
@for $i from 1 through 3 {
.item-#{$i} { width: 2px * $i; }
}
编译后的book.css
.item-1 { width: 2px; } .item-2 { width: 4px; } .item-3 { width: 6px; }经典网格生产class代码index.scss
$grid-prefix: span !default; $grid-width: 60px !default; $grid-gutter: 20px !default; %grid { //%占位符,编译后不产生代码 float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; //@extend继承 } }编译后的index.css
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { float: left; margin-left: 10px; margin-right: 10px; } .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; } .span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; } .span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; }3、@while
$types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types} { width: $type-width + $types; } $types: $types - 1; }4、@each
$list: adam john wynn mason kuroir;//$list 就是一个列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; }
编译
.author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }