SCSSのおさらいメモ。

実行コマンド

• sass --style expanded scss/main.scss:css/main.css
  • --style expanded はTabIndexしないoption
• sass --style --watch scss:css 変更を自動反映

 Basic Syntax

• /*…*/ コメント, または //…
• & は親要素を表す
  

  a {
      text-decoration: none;
      &:hover {
          font-weight: bold;
      }
  }
  

 Variables

• $〜で変数を宣言
• {} 記号で値を評価
  

  $baseFontSize: 14px;
  
  #main {
      p {
          font-size: $baseFontSize;
          .sub {
              font-size: $baseFontSize - 2px; // 12px
              font-size: #{12 + 12}px; // 24px
          }
      }
  }
  

• 文字列変数
  

  $imgDir: "../img/";
  
  #main {
      background-image: url($imgDir + "bg.img");
      // or background-image: url("#{$imgDir}bg.img");
  }
  

• カラー変数
  

  $brandColor: rgba(255,0,0,0.9);
  
  #main {
      color: lighten($brandColor, 30%);
  }
  

  • lighten とか darken とか -> Builtin Functions 参照

 制御構文

• if分岐： @if, @else if, @else を使う
  

  $debugMode: true;
  
  #main {
      @if $debugMode == true {
          color: red;
      } @else {
          color: blue;
      }
  }
  

• forループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  @for $i from 10 through 14 {
      .fs#{$i} { font-size: #{$i}px; }
  }
  

• whileループ
  

  // .fs10 〜 .fs14 までいっきに作る！
  $i: 10;
  @while $i <= 14 {
      .fs#{$i} { font-size: #{$i}px; }
      $i: $i + 1;
  }
  

 LIST

• 似たようなデータをまとめて管理
  

  $animals: cat, dog, tiger;
  @each $animal in $animals {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

• ちょくせつリストをeach文に書いてもよし。
  

  @each $animal in cat, dog, tiger {
      #{$animal}-icon { background: url("#{$animal}.png"); }
  }
  

 FUNCTION

    $totalWidth: 940px;
    $columnCount: 5;

    @function getColumnWidth($width, $count) {
        $padding: 10px;
        $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
        @debug $columnWidth;
        @return $columnWidth;
    }

    .grid {
        float: left;
        width: getColumnWidth($totalWidth, $columnCount);
    }

 ファイルの分離

• _settings.scss settingファイル
  

  $totalWidth: 940px;
  $columnCount: 5;
  

• _functions.scss 関数ファイル
  

  @function getColumnWidth($width, $count) {
      $padding: 10px;
      $columnWidth: floor(($width - $padding * ($count - 1)) / $count);
      @debug $columnWidth;
      @return $columnWidth;
  }
  

• main.scss 読み込み
  

  @import "settings";
  @import "functions";
  
  .grid {
      float: left;
      width: getColumnWidth($totalWidth, $columnCount);
  }
  

 @mixin (複数の設定をまとめて管理)

    @mixin round {
        border-radius: 5px;
    }

    .label {
        font-size: 12px;
        @include round;
    }

• 引数を付けることもできるよ
  

  @mixin round($radius:4px) { // def.value: 4px
      border-radius: $radius;
  }
  
  .label {
      font-size: 12px;
      @include round(10px);
  }
  

 @extend (継承)

    .msg {
        font-size: 12px;
        font-weight: bold;
        padding: 2px 4px;
    }

    .errorMsg {
        background: red;
        @extend .msg;
    }

    .warningMsg {
        background: orange;
        @extend .msg;
    }