引数に真偽値を入れて出し分けよう

myLayoutと言う名前のmixinを作り「期待するCSS」を実現しましょう。

                .ninja1{
  @include myLayout(50px, false);
}
.ninja2{
  @include myLayout(50px, true);
}
¥SASS¥

                  .ninja1 {
  width: 50px;
}
.ninja2 {
  width: 50px;
  height: 20px;
}
¥CSS¥

              @mixin myLayout($width, $bool){
  width: $width;
  @if $bool {
    height: 20px;
  }
}
¥SASS¥

if分も使えるのがsassの強い所だ
いわゆるプログラミング言語ぽく書くことができる。

分岐が使えればかなり細かい設定が可能になる。

しかしあくまでスタイルを指定するものなので
使いすぎてヒッチャカメッチャカにならないように注意しよう。

ログインして解答を見る

完了にする！

1.SASSとは

続きの動画を見たい方は公式LINEから「sass」と送信すると動画が見れます。