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