sass初心者の学習まとめ

# note

[sass初心者のメモ](http://qiita.com/akuden/items/e99569934810c595453b) で学習した際の自分用まとめです。

参照サイト

- [dotinstall Sass/SCSS入門](http://dotinstall.com/lessons/basic_sass)
- [Adobe Creative Station 現場で役立つ実践Sass](https://blogs.adobe.com/creativestation/serialization/web-sass-practice)
- [Sassチートシート](http://qiita.com/morrr/items/36ab58bae25891331e39)
- [Sassメモ](http://qiita.com/tomoyuki_okawa/items/b7c0d970f45435eab7c3)


## ネスト

```
.foo {
  .bar {
    // .foo .bar
  }
}

.foo {
  > .bar {
    // .foo > .bar
  }
  + .baz {
    // .foo + .bar
  }
}

.foo {
  .bar & {
    // .bar .foo
  }
  &: hover {
    // foo:hover
  }
}

.foo {
  border {
    top: 0; // border-top
    bottom: 0; // border-bottom
  }
}
```


## コメント

```
/* 通常コメント：展開後に残る */
// スラッシュ二つ：展開後は削除される
```


## 変数
データ型： 数値、文字列、真偽、色、リスト

```
- スコープ -
$hoge: 0; // グローバル変数

p {
  $fuga: 0; // ローカル変数
}

- 変数データ型 -
$fontSize: 16;             // Number：数値（単位を含むことも可能 px em 等）
$imgDir: "../img/";        // String：文字列
$fontColor: #ffffff;       // Color：色…cssで使用できる値（red、#000000、rgba(0,0,0,1)等）
$flag: true;               // Boolean：真偽… 条件分岐：@if @else 、比較演算子： == != < > <= >=
$animals: cat, dog, tiger; // List：リスト（配列）
                           // Map：マップ（連想配列）※未学習
                           // Null：空の値 ※未学習

- 例 -
.foo {
  font-size: $fontSize;
  font-size: #{$fontSize - 2}px; // #{hoge} シャープ波括弧を使った補完構文で計算も可能：補完(インターポレーション)
  font-size: #{16 + 2}px; // 変数を使わず直接計算も
  background: url($imgDir + "bg.png"); // 通常の記述法
  background: url("#{$imgDir}bg.png"); // このような書き方も
  color: $fontColor;
  color: lighten($fontColor, 30%); // lighten/darken 変数の値を 明るく/暗く 相対指定が可能（sass関数）

  @if $flag == true { // 比較演算子を使った条件分岐で値を変更したりも可能
    color: red;
  } @else {
    color: green;
  }
  p {
    @if $fontSize > 20 { color: yellow; }
  }
}
```

※sass関数一覧：[sass built-in functions](http://sass-lang.com/documentation/Sass/Script/Functions.html)


## ループ ＠for ＠while

```
@for $i from 10 through 14 { // for文 変数宣言 from 開始数値 through（スルー）終了数値
  .fs#{$i} { font-size: #{$i}px; }
}

$i: 20; // while文では先に変数宣言すること
@while $i <= 24 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}
```

## 配列

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

// この書き方でも同じ
@each $animal in cat, dog, tiger {
  .#{$animal}-icon { background: url("#{$animal}.png"); }
}

- css -
.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}

.cat-icon {
  background: url("cat.png");
}

.dog-icon {
  background: url("dog.png");
}

.tiger-icon {
  background: url("tiger.png");
}
```


## 関数

```
- scss -
$totalWidth: 940px;
$columnCount: 10;

@function getColumnWidth($width, $count) {
  // $columnWidthを計算
  $padding: 10px; // 関数内で宣言した変数は、その中でしか使用できない
  $columnWidth: floor(($width -($padding * ($count - 1))) / $count);
  @debug $columnWidth; // 計算された数値を確認したいとき、@debug を使用するとコンソールに計算結果を表示可能
  @return $columnWidth;
}

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

- css -
.foo {
  float: left;
  width: 85px;
}
```


## ファイル分割 ＠import
関数などを別ファイルにしてスッキリ管理しやすく。
読み込み用の外部ファイルはファイ不明の頭に「\_(アンダーバー)」を付ける。
ファイル名頭に「\_」のファイルはsassコマンド実行してもcssは生成されない。

```
@import "settings"; // _settings.scss の読み込み
@import "functions"; // _functions.scss の読み込み
```


## ミックスイン ＠mixin

```
@mixin round($radius:4px) {// 引数の初期値の設定も可能
  border-radius: $radius;
}

.foo {
  @include round(10px); // 展開→ border-radius: 10px;
}

.bar {
  @include round; // 展開→ border-radius: 4px;
}
```


## 継承（エクステンド） ＠extend
共通プロパティを持つクラスは、＠extend で継承させて差分のみを記述するとコードを短くできる。

```
- scss -
.foo {
  font-size: 12px;
}

.bar {
  @extend .foo;
  color: red;
}

.baz {
  @extend .foo;
  color: blue;
}

- css -
.foo, .bar, .baz {
  font-size: 12px;
}

.bar {
  color: red;
}

.baz {
  color: blue;
}
```


## 演算

追ってまとめたいと思います。


ありがとうございました。