[sass/scss]控制语句示例

scss代码:

/*if*/

$type: 'bufy';

p {
    @if $type == 'bufy' {
        color: red;
    } @else if $type == 'tim' {
        color: blue;
    } @else if $type == 'tony' {
        color: green;
    } @else {
        color: black;
    }
}

@if $type == 'bufy' {
    .div {
        color: red;
    }
}@else {
    .div {
        color: blue;
    }
}

/*for*/

@for $i from 1 through 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
@for $i from 1 to 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
/*for list*/
$list:(1,2,3,4,5);
@for $i from 1 through length($list) {
    .item#{$i} {
        width: 1px * $i;
    }
}

/*while*/

$i: 6;

@while $i > 0 {
    .item#{$i} {
        width: 1px * $i;
    }

    $i: $i - 2;
}

/*each*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);

.div {
    @each $key , $value in $map {
        #{$key}:$value;
    }
}

编译后得到的css代码:

/*if*/
p {
  color: red;
}

.div {
  color: red;
}

/*for*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

/*for list*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item4 {
  width: 4px;
}

.item5 {
  width: 5px;
}

/*while*/
.item6 {
  width: 6px;
}

.item4 {
  width: 4px;
}

.item2 {
  width: 2px;
}

/*each*/
.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}