第4章高度な機能を覚えてSassを使いこなそう

4-5 制御構文で条件分岐や繰り返し処理を行う

@if を使って条件分岐をする

// 汎用的なclassを使うかどうか
$generalStyle: true;

@if $generalStyle {
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
}

$getStyle: 0;

@mixin style {
    @if $getStyle == 1 {
        margin: 0 0 30px;
        padding: 15px;
        background: #eee;
    }
    @else if $getStyle == 2 {
        margin: 0 10px 15px;
        padding: 20px 15px;
        border: 2px solid #333;
    }
    @else {
        margin: 0 0 10px;
    }
}

.box {
    @include style;
}

.box {
  margin: 0 0 10px;
}

.box {
  margin: 0 10px 15px;
  padding: 20px 15px;
  border: 2px solid #333;
}

@for で繰り返し処理を行う

@for $value from 1 through 3 {
    .throughSample_#{$value} {
        margin-bottom: 1px * $value;
    }
}

@for $value from 1 to 3 {
    .toSample_#{$value} {
        margin-bottom: 1px * $value;
    }
}

.throughSample_1 {
  margin-bottom: 1px;
}

.throughSample_2 {
  margin-bottom: 2px;
}

.throughSample_3 {
  margin-bottom: 3px;
}

.toSample_1 {
  margin-bottom: 1px;
}

.toSample_2 {
  margin-bottom: 2px;
}

@for $value from 1 through 2 {
    .mt_#{$value * 10} {
        margin-top: 10px * $value;
    }
    .mb_#{$value * 10} {
        margin-bottom: 10px * $value;
    }
}

.mt_10 {
  margin-top: 10px;
}
.mb_10 {
  margin-bottom: 10px;
}
.mt_20 {
  margin-top: 20px;
}
.mb_20 {
  margin-bottom: 20px;
}

@while でより柔軟な繰り返し処理を行う

$value: 20;
@while $value > 0 {
    .mt_#{$value} {
        margin-top: #{$value}px
    }
    .mb_#{$value} {
        margin-bottom: #{$value}px
    }
    $value: $value - 10;
}

$index: 300;
@while $index > 200 {
    .box_#{$index} {
        width: 2px * $index;
    }
    $index: $index - 32;
}

.box_300 {
  width: 600px;
}

.box_268 {
  width: 536px;
}

.box_236 {
  width: 472px;
}

.box_204 {
  width: 408px;
}

@each で配列の要素に対して処理を実行する

.body-top {
    background-image: url(../img/bg_top.png);
}
.body-about {
    background-image: url(../img/bg_about.png);
}
.body-company {
    background-image: url(../img/bg_company.png);
}
.body-contact {
    background-image: url(../img/bg_contact.png);
}

$nameList: top, about, company, contact;

@each $name in $nameList {
    .body-#{$name} {
        background-image: url(../img/bg_#{$name}.png);
    }
}