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

猜你喜欢