scss控制指令学习

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; }