sassまとめ
拡張子は.scss(.sassは書き方が少し違う模様)
logo-235e394c

 

【いんすとーる】
ターミナルで

sudo gem install sass

と入力。
パスワード聞いてくるので入力。
パスワード設定してないとエラーがでるので、なんかしら設定しておく。

【コンパイラー】
・Prepros(http://alphapixels.com/prepros/
無料版あり

・CodeKit(http://incident57.com/codekit/
試用期間あり

〜利用方法〜
①〜⑥以外にも関数が用意されてたりif文や回したりも出来る模様。

①ネスト(入れ子)ができる

#headFrame{
  width: $main_width;
  margin: 20px auto 0;
  padding-bottom: 10px;
  #sochiLogoWrap{
    float: left;
    #sochiLogo{
      font-size: 250%;
      width: 230px;
      height: 65px;
      @include sprite_main_bgz;
      background-position: 0 0;
      a{
        display: block;
        color: #666666;
        text-indent: -9999px;
        &:hover{
          color: #333333;
        }
      }
    }
  }
  #sochiCount{
    font-size: 110%;
    text-align: right;
    color: #666666;
    span{
      color: #333333;
      font-size: 140%;
      font-family: 'Poller One', cursive;
      display: inline-block;
      padding: 0 20px;
    }
  }
  #ad728x90{
    float: right;
    @media(max-width:500px){
      float: none;
    }
  }
}

※親セレクタの参照は&を使用
※メディアクエリも入れ子に入れられる

②変数が使える

$main_width:300px;
div{
  width:$main_width;
}

③算数ができる

div{
  width:960px - 300;
}

・変数と混ぜる

$bg_color_g : #0caa97;
$bgEffect: 1.3;

div{
  background-color: $bg_color_g;
  &:hover{
    background-color: $bg_color_g * $bgEffect;
  }
}

④インポートして一枚のCSSにする
リセットCSS等、別ファイルにしたものを読み込んで合体して出力。
ファイル名を【_reset.scss】最初にアンダーバーをつけるのがミソ。
読み込む側に

@import "_reset";

と拡張子なしのファイル名だけ記述。

⑤ミックスイン
よく使う同じスタイルを定義して随所で使用出来る。
定義:@mixin

@mixin sprite_main_bgz{
  background-image: url(/sochi2014/mod/img/sprite-main_retina.png);
  background-repeat: no-repeat;
  -webkit-background-size: 300px 300px;
  background-size: 300px 300px;
}

使用:@include

#sochiLogo{
  @include sprite_main_bgz;
  background-position: 0 0;
}

⑥ID、クラスの継承
クリアフィックスの簡易化が主な使用方法。
最強の呪文【clearfix】色んな書き方がありますが、みんな絶対書いてます。

定義:普通に定義された物を使用

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

使用:@extend

.relevantWordBox{
  width: 50%;
  ul{
    @extend .clearfix;
  }
}