• -> sass-documentation
• -> 基本
• -> atomでsass保存
• -> gulpでsass

1. atom:ファイルの拡張子でルールが変わる。.sass / .scss
2. sassは,{}なしでの記述。なしの分だけコーディング量が減るけど、見にくい。

//CODE
$名前 : 値 ;

//CODE
@for $i from 1 through 3 {
  .boxA-#{$i} { width: 10px * $i; }
}
@for $j from 1 to 3 {
  .boxB-#{$j} { width: 10px * $j; }
}

.bixA-1{ width: 10px; }
.bixA-2{ width: 20px; }
.bixA-3{ width: 30px; }
.bixB-1{ width: 10px; }
.bixB-2{ width: 20px; }

//CODE
$nameList: taro, jiro, saburo, shiro;
@each $name in $nameList{
  .img-#{$name} {
    background-image: url(../img/#{name}.jpg);
  }
}
.img-taro{ background-image: url(../img/taro.jpg); }
.img-jiro{ background-image: url(../img/jiro.jpg); }
.img-saburo{ background-image: url(../img/saburo.jpg); }
.img-shiro{ background-image: url(../img/shiro.jpg); }

$_headers: (h1: 1.6rem, h2: 1.4rem, h3: 1.2rem);
@each $tag, $size in $_headers {
  #{$tag} {
    font-size: $size;
  }
}

//連想配列を用意して
$colors-beta: (
  blk-b: #000000,
  blk-l: #e0e0e0,
  blu-b: #0d47a1,
);

//OK
@each $key, $color in $colors-beta {
  .#{$key} {
    @at-root {
      #{&}.fuu, #{&}.hoge, {
        color: $color;
      }
    }
  }
}

//手前に接続して出力
.blk-b.fuu, .blk-b.hoge { color: #000000; }
.blk-l.fuu, .blk-l.hoge { color: #e0e0e0; }
.blu-b.fuu, .blu-b.hoge { color: #0d47a1; }

//逆だとまずい？
.fuu.blk-b, .hoge.blk-b { color: #000000; }

  @mixin hoge($color: #fff, $fSize: 16px) {
    color: $color;
    font-size: $fSize;
  }
  .text {
    @include hoge(black, 20px);
  }
  .text2 {
    // 引数は初期値のを使用
    @include hoge();
  }


  .text {
    color: black;
    font-size: 20px;
  }
  .text2 {
    color: #fff;
    font-size: 16px;
  }

  @mixin hoge() {
    // js有効時には非表示にしたい
    .js & {
      display: none;
      @content;
    }
  }
  .div {
    @include hoge();
  }
  .div2 {
    @include hoge() {
      // この中が@mixinの@contentに追加
      font-weight: bold;
    }
  }


  .js .div {
  display: none;
}
.js .div2 {
  display: none;
  font-weight: bold;
}