Scss的控制命令

Scss的控制命令

---

一、条件语句 @if

@if

@if @else

@if @else if @else

栗子：

@mixin blockOrHidden($boolean:true) {

    @if $boolean {

        display: block;

    } @else {

        display: none;

    }

}

.block {

    @include blockOrHidden;

}

.hidden {

    @include blockOrHidden(false);

}

// css

.block {

    display: block;

}

.hidden {

    display: none;

}

二、循环语句 @for

@for $i from <start> through <end> // 包括end这个数

@for $i from <start> through <end> // 不包括end这个数

栗子：

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

    }

}

三、循环语句 @while

栗子：

// scss

$types: 4;

$type-width: 20px;

@while $types > 0 {

    .while-#{$types} {

        width: $type-width + $types;

    }

    $types: $types -1;

}

四、循环语句 @each

@each $var in <list>

栗子：

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