aprendizaje de comandos de control scss

1, @si

en una definición de macro mixin

libro.scss

@mixin blockOrHidden( $boolean:true ) {
   @if  $boolean { 
      @debug "$boolean is #{$boolean}";//@debug;@warn,@error 
      display: block; 
    } @else { 
      @debug "$boolean es #{$boolean}";//#{} 插值 会执行
      display: none; 
    } 
} 
.block { 
  @include blockOrHidden; 
} 
.hidden{ 
  @include blockOrHidden(false); 
}
  

执行 sass --ver E:\sass/book.scss:E:\sass/books.css

libros.css

.bloque { 
  pantalla: bloque; 
} 

.hidden { 
  mostrar: ninguno; 
}

El rol de @debug en book.scss realmente imprimirá información en la línea de comando de Ruby

E:\sass/book.scss:3 DEPURACIÓN: $booleano es verdadero
E:\sass/book.scss:7 DEPURACIÓN: $booleano es falso

@warn correspondiente genera una advertencia, @error informa un error y no puede compilar

2, @ para

@for $comienzo hasta/hasta el final

$i variable (fijo), hasta el final incluye y viceversa

libro.scss

@for $i del 1 al 3 { 
  .item-#{$i} { ancho: 2px * $i; } 
}

Libro compilado.css

.elemento-1 { 
  ancho: 2px; 
} 

.item-2 { 
  ancho: 4px; 
} 

.item-3 { 
  ancho: 6px; 
}

Código de clase de producción de cuadrícula clásica index.scss

$grid-prefix: span !default; 
$grid-width: 60px !default; 
$grid-gutter: 20px !default; 

%grid { //% marcador de posición, no se generará código después de la compilación 
  float: left; 
  margin-left: $grid-gutter / 2; 
  margin-right: $grid-gutter / 2; 
} 
@for $i del 1 al 12 { 
  .#{$grid-prefix}#{$i}{ 
    ancho: $grid-width * $ i + $grid-gutter * ($i - 1); 
    @extend %grid; //@extend hereda 
  }   
}

index.css compilado

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