SASS语法►高级

SASS语法--高级


@if 三目运算

For explame:

1
2
3
4
$screenWidth: 500;
body{
  color: if($screenWidth > 768, blue, red);
}

is complied to:

1
2
3
body {
  color: red;
}

@if

For explame:

1
2
3
4
5
@if $screenWidth > 768{
  body{
    color: red;
  }
}

is complied to:

1
2
3
body {
  color: red;
}

@if…@else if…@else

For explame:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@if $screenWidth > 768{
  body{
    color: red;
  }
}
@else if $screenWidth >400{
  span{
    color: green;
  }
}
@else{
  p{
    color: blue;
  }
}

is complied to:

1
2
3
span {
  color: green;
}

@for

For explame:

1
2
3
4
5
@for $i from 1 to 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.span1 {
  width: 20%;
}
.span2 {
  width: 40%;
}
.span3 {
  width: 60%;
}
.span4 {
  width: 80%;
}

For explame:

1
2
3
4
5
@for $i from 1 through 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.span1 {
  width: 20%;
}
.span2 {
  width: 40%;
}
.span3 {
  width: 60%;
}
.span4 {
  width: 80%;
}
.span5 {
  width: 100%;
}

@while

For explame:

1
2
3
4
5
6
7
$j: 6;
@while $j > 0{
  .p#{$j}{
    width: 20% * $j;
  }
  $j: $j - 3;
}

is complied to:

1
2
3
4
5
6
7
.p6 {
  width: 120%;
}
.p3 {
  width: 60%;
}

@each

For explame:

1
2
3
4
5
6
7
$k: 1;
@each $c in blue, red, green {
  .div#{$k}{
    color: $c;
  }
  $k: $k+1;
}

is complied to:

1
2
3
4
5
6
7
8
9
10
11
.div1 {
  color: blue;
}
.div2 {
  color: red;
}
.div3 {
  color: green;
}

For explame:

1
2
3
4
5
@each $key,$color in (default, blue), (info, green), (danger, red){
  .text-#{$key}{
    color: $color;
  }
}

is complied to:

1
2
3
4
5
6
7
8
9
10
11
.text-default {
  color: blue;
}
.text-info {
  color: green;
}
.text-danger {
  color: red;
}

For explame:

1
2
3
4
5
@each $key, $value in (default: blue, info: green, danger: red){
  .label-#{$key}{
    color: $value;
  }
}

is complied to:

1
2
3
4
5
6
7
8
9
10
11
.label-default {
  color: blue;
}
.label-info {
  color: green;
}
.label-danger {
  color: red;
}