Sassの基本

• ネスト
• 親セレクタの参照(&)
• 変数
• 演算
• @import
• @extend
• @mixin
• 条件分岐(@if/@for/@while/@each)
• 関数
• 自作関数(@function)
• 検証で使える(@debug/@warn)
• インターポレーション(#{})

※以下、勉強になった事柄のみ抜粋し、記述する

ネスト

子孫セレクタ以外のセレクタ(+ > など)をネストするためには

Sassの記述

.block{
  + btnA{
    margin:120px;
  }
}

出力結果　CSS

.block + btnA {
  margin: 120px;
}

@mediaのネスト

Sassの記述

.block{
  width:300px;
  @media screen and (max-eidth:624px){
    width:auto;
  }
}

出力結果　CSS

.block {
  width: 300px;
}
@media screen and (max-eidth: 624px) {
  .block {
    width: auto;
  }
}

プロパティのネスト（※煩雑になるためあまり使わない方がいいが知識として）

-(ハイフン)があるプロパティはすべて以下のようにネストできる

Sassの記述

.block{
  border:{
    bottom:20px;
  }
}

出力結果　CSS

.block {
  border-bottom: 20px;
}

@import

ファイルの先頭に_(アンダーバー)があるとファイルを出力されない。この機能を、パーシャルという。

@extend

　指定したセレクタのスタイルを継承することができる機能

Sassの記述

.sample{
    margin: 20px;
    padding: 40px;
}
.btn{
  @extend .sample;
  color:#fff;
}

出力結果　CSS

.sample, .btn {
  margin: 20px;
  padding: 40px;
}
.btn {
  color: #fff;
}

@extend専用のプレースホルダー(%)セレクト(CSSに出力されず、宣言のように使える)

Sassの記述

%sample{
    margin: 20px;
    padding: 40px;
}
.btn{
  @extend %sample;
  color:#fff;
}

出力結果　CSS

.btn {
  margin: 20px;
  padding: 40px;
}

.btn {
  color: #fff;
}

注意点

• @media内では外の@extendは使用できない。使う場合は、@media内に記載しないといけない。

• @extendが使えない例（子孫セレクタ、子セレクタ、連結セレクタ、間接セレクタ）
  ※以下のように意図しない出力結果になる

Sassの記述

.sample .block{
    margin: 20px;
    padding: 40px;
}
.btn{
  @extend .sample;
  color:#fff;
}

出力結果　CSS

.sample .block, .btn .block {
  margin: 20px;
  padding: 40px;
}

.btn {
  color: #fff;
}

@mixin

特徴1:スタイルの集まりを定義して(@mixin)おき、それを他の場所で呼び出して(@include)利用
特徴2:引数を指定できる
特徴3:@content(ミックスインにコンテントブロックを渡す機能)
※@extendとの違いは特徴2,3ができる点。スタイルの展開の仕方。

Sassの記述

@mixin sample($value:20, $value2:20){
    margin: $value + px;
    padding: $value2 + px;
}
.btn{
  @include sample(30);
  color:#fff;
}

出力結果　CSS

.btn {
  margin: 30px;
  padding: 20px;
  color: #fff;
}

※&あり、なしでは出力結果が異なる

Sassの記述(&ありの場合)

@mixin hackIE7{
  .app html &{
    @content;
  }
}

.sample{
  .img{
    width:30px;
    @include hackIE7{
      margin:20px;
    }
  }
}

出力結果　CSS(&ありの場合)

.sample .img {
  width: 30px;
}
.app html .sample .img {
  margin: 20px;
}

Sassの記述(&なしの場合)

@mixin hackIE7{
  .app html{
    @content;
  }
}

.sample{
  .img{
    width:30px;
    @include hackIE7{
      margin:20px;
    }
  }
}

出力結果　CSS(&なしの場合)

.sample .img {
  width: 30px;
}
.sample .img .app html {
  margin: 20px;
}

Sassの記述（よく使う）

@mixin sp{
  @media screen and (max-eidth:624px){
    @content;
  }
}
.sample{
  .btn{
    width:30px;
    @include sp{
      margin:20px;
    }
  }
}

出力結果　CSS（よく使う）

.sample .btn {
  width: 30px;
}
@media screen and (max-eidth: 624px) {
  .sample .btn {
    margin: 20px;
  }
}

条件分岐(@if/@for/@while/@each)

@if

Sassの記述

$value:30;

.btn{
  @if $value  == 10{
    width:$value + px;
  }
  @else if $value == 20{
    width:$value + rem;
  }
  @else{
    width:$value + em;
  }
}

出力結果　CSS

.btn {
  width: 30em;
}

@for

Sassの記述

/* throughは指定した数値を含む */
@for $value from 1 through 3{
  .throughsample_#{$value} {
    margin-bottom: $value + px;
  }
} 

/* toは指定した数値を含まない */
@for $value from 1 to 3{
  .tosample_#{$value} {
    margin-top: $value + px;
  }
} 

出力結果　CSS

/* throughは指定した数値を含む */
.throughsample_1 {
  margin-bottom: 1px;
}

.throughsample_2 {
  margin-bottom: 2px;
}

.throughsample_3 {
  margin-bottom: 3px;
}

/* toは指定した数値を含まない */
.tosample_1 {
  margin-top: 1px;
}

.tosample_2 {
  margin-top: 2px;
}

@while

(@forより複雑な繰り返し処理を行うことができる（増減値を変えることができる）)

Sassの記述

$value:20;

@while $value > 10{
  .box_#{$value} {
    width: $value;
  }
  $value: $value - 2;
}

出力結果　CSS

.box_20 {
  width: 20;
}

.box_18 {
  width: 18;
}

.box_16 {
  width: 16;
}

.box_14 {
  width: 14;
}

.box_12 {
  width: 12;
}

@each
リスト（配列）の要素に対して繰り返し処理をすることができる

Sassの記述

$nameList: top, about, company;
@each $name in $nameList{
  .body-#{$name} {
    backgrand-images: url(../../bg-#{$name}.png);
  }
}

出力結果　CSS

.body-top {
  backgrand-images: url(../../bg-top.png);
}
.body-about {
  backgrand-images: url(../../bg-about.png);
}
.body-company {
  backgrand-images: url(../../bg-company.png);
}

関数

• abs()

• round()

• ceil()

• floor()

• percentage()

• unquote()

• quote()

• rgba()
  Sassの記述

.sample{
  color: rgba(#ccc, 0.3);
}

出力結果　CSS

.sample {
  color: rgba(204, 204, 204, 0.3);
}

自作関数(@function)

※ @mixinとの違いは用途。@mixinはルールセットごと使用するのに対して、関数（@function）は主に値で使用します（返り値が値）。

Sassの記述

@function halfSize($value:30){
  @return $value / 2 + px;
}

.sample{
  width: halfSize();
  height: halfSize(50);
}

出力結果　CSS

.sample {
  width: 15px;
  height: 25px;
}

インターポレーション(#{})

いくつか役割がある便利な機能

• 変数が参照できない場所でも使うことができる機能
• 演算しないようにする

参考文献)

• 「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」
• Sass公式サイト 　http://sass-lang.com/
• シュミレーター 　http://www.sassmeister.com/
• http://www.monster-dive.com/blog/web_creative/20140222_001115.php