Sassメモ

今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。
導入とかは省いて構文などのメモです。

SassにはSassとSCSSと言う2種類の記法があるらしいですけど、
ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。

# 基本的なこと
## 記号いろいろ

|記号|意味|
|:--|:--|
|$_var_|変数|
|%_class_|Sass内でのクラス定義|
|&|親セレクタ参照|
|#{$_var_}|変数参照(変数の値をクラス名などに利用するとき)|
|@_xxx_|@で始まるものは制御文|

### 制御文の例

|制御文|役割|
|:--|:--|
|`@mixin`|ミックスイン定義|
|`@include`|ミックスイン使う|
|`@function`|ファンクション定義|
|`@content`|ミックスインにブロックコンテンツをわたす|
|`@extend`|クラスの継承|
|`@if`|分岐 `@else` とかある|
|`@for`|ループ|
|`@each`|配列回すやつ|

などなど。

## コメントの書き方

```scss:SCSS
/* このコメントは */
/* CSS変換後も
 * 残ります。 */
body { color: black; }

// こちらのコメントは
// CSSに変換すると消えます。
// 複数行構文はないよ！
a { color: green; }
```

```css:CSS
/* このコメントは */
/* CSS変換後も
 * 残ります。 */
body {
  color: black;
}

a {
  color: green;
}
```

## 階層構造をそのままネストして書ける

変数が使えるよ！

```scss:SCSS
$space: 5px;
.parent {
  margin: $space;
  .child {
    padding: $space;
  }
}
```

```css:CSS
.parent {
  margin: 5px;
}
.parent .child {
  padding: 5px;
}
```

## プレフィックスが同じプロパティもネストして書ける

```scss:SCSS
.box {
  width: 150px;
  padding: {
    top: 5px;
    bottom: 10px;
  }
}
```

```css:CSS
.box {
  width: 150px;
  padding-top: 5px;
  padding-bottom: 10px;
}
```

## 擬似要素もネスト

```scss:SCSS
.box {
  color: #000;
  &:hover {
    color: #f00;
  }
}
```

```css:CSS
.box {
  color: #000;
}

.box:hover {
  color: #f00;
}
```

# 継承

クラスの継承ができる！

```scss:SCSS
%box-base {
  margin: 10px;
  padding: 10px;
}

.box_red {
  @extend %box-base;
  color: #f00;
}

.box_blue {
  @extend %box-base;
  color: #00f;
}
```

```css:CSS
.box_red, .box_blue {
  margin: 10px;
  padding: 10px;
}

.box_red {
  color: #f00;
}

.box_blue {
  color: #00f;
}
```

`%` で始まるセレクタはSassのもので、CSSに出力はされないけれど継承などに利用できるクラスになります。

# ミックスイン / 関数
## ミックスイン

同じ処理を一つにまとめることができます。

```scss:SCSS
@mixin basebox {
  margin: 10px;
  padding: 10px;
}
.box_red {
  @include basebox;
  color: #f00;
}

.box_blue {
  @include basebox;
  color: #00f;
}
```

```css:CSS
.box_red {
  margin: 10px;
  padding: 10px;
  color: #f00;
}

.box_blue {
  margin: 10px;
  padding: 10px;
  color: #00f;
}
```

### 引数をつかう
```scss:SCSS
@mixin solidborder($width: 1px) {
  border: $width solid #000;
}
.border {
  @include solidborder;
}

.bold_border {
  @include solidborder(5px);
}
```

```css:CSS
.border {
  border: 1px solid #000;
}

.bold_border {
  border: 5px solid #000;
}
```

### `@content` を使う
```scss:SCSS
@mixin boxbase {
  margin: 1px;
  padding: 5px;
  @content
}

.red-border-box {
  @include boxbase {
    border: 1px solid #f00;
  }
}
```

```css:CSS
.red-border-box {
  margin: 1px;
  padding: 5px;
  border: 1px solid #f00;
}
```

実際上記の様に使うことはあんまないと思います。

参考：[(翻訳) Sassの@contentのユースケース](http://howtohp.com/2014/05/08/sass-content-directive/)

## 関数

引数を取り、結果を返却する関数を定義できます。

```scss:SCSS
$imagesPath: "../images/";
@function printUrl($fileName) {
  @return url($imagesPath + $fileName);
}

.icon {
  background: printUrl('icon.png') no-repeat center center;
}
```

```css:CSS
.icon {
  background: url("../images/icon.png") no-repeat center center;
}
```

関数外で宣言した変数も使えるようです。（危険）

この辺まではぼんやり知ってたんですけど、この先がびっくりしました。

# ループ とか

## For

ループまであったんかSass兄さん…。（分岐まである）

```scss:SCSS
@for $i from 1 through 5 {
  .box_#{$i} {
    margin: {
      // 普通の分岐
      @if $i == 1 {
        bottom: 5px;
      }
      @else {
        bottom: $i * 10px;
      }
    }
    // if関数まである
    padding: {
      left: if($i == 1, 5px, $i * 5px);
    }
  }
}
```

```css:CSS
.box1 {
  margin-bottom: 5px;
  padding-left: 5px;
}

.box2 {
  margin-bottom: 20px;
  padding-left: 10px;
}

.box3 {
  margin-bottom: 30px;
  padding-left: 15px;
}

.box4 {
  margin-bottom: 40px;
  padding-left: 20px;
}

.box5 {
  margin-bottom: 50px;
  padding-left: 25px;
}
```

### if関数
* `if(条件, 正の場合に出力する, 負の場合に出力する)`

## 配列

ループがあるなら配列がないとね、という訳で配列も使えるようです。

```scss:SCSS
$icons: 'icon_a', 'icon_b', 'icon_c';
@each $icon in $icons {
  .#{$icon} {
    background: printUrl($icon + '.png') no-repeat center center;
  }
}
```

```css:CSS
.icon_a {
  background: url("../images/icon_a.png") no-repeat center center;
}

.icon_b {
  background: url("../images/icon_b.png") no-repeat center center;
}

.icon_c {
  background: url("../images/icon_c.png") no-repeat center center;
}
```

とりあえずここまで！
CSSあんまり書かないけどこれ覚えたら凄い早くなるだろうなあ。

そんな関数ねえだろーって思ったらめっちゃあったから取り敢えず一覧だけ。

# 組み込み関数

詳しくはこちら
[関数一覧 | Web制作者のためのSassの教科書 - 公式サポートサイト](http://book.scss.jp/code/c8/07.html)

バージョンによって追加された関数とかまだまだありそう。
やばい、おぼえきれない、すごい。

## RGB形式の色を操作する関数
* `rgb($red, $green, $blue)`
10進数または%指定のRGB値を16進数のRGB値に変換します。

* `rgba($red, $green, $blue, $alpha)`
RGBA値を10進数のRGBA値に変換します。CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。また、キーワードも変換してくれます。

* `red($color)`
16進数のRGB値のR値（赤）を返します。

* `green($color)`
16進数のRGB値のG値（緑）を返します。

* `blue($color)`
16進数のRGB値のB値（青）を返します。

* ``mix($c1, $c2, [$weight])`
2つの色を混ぜて中間色が作れます。

## HSL形式の色を操作する関数
* `hsl($hue, $saturation, $lightness)`
HSL形式の値を16進数のRGB値に変換します。

* `hsla($hue, $saturation, $lightness, $alpha)`
HSLA形式の値をRGBA値に変換します。

* `hue($color)`
HSL形式からhue値（色相）を返します。

* `saturation($color)`
HSL形式からsaturation値（彩度）を返します。

* `lightness($color)`
HSL形式からlightness値（明度）を返します。

* `adjust-hue($color, $degrees)`
指定した色のhue値（色相）の角度を変更します。

* `lighten($color, $amount)`
指定した色の明度を上げて明るくします。

* `darken($color, $amount)`
指定した色の明度を下げて暗くします。

* `saturate($color, $amount)`
指定した色の彩度を上げます。

* `desaturate($color, $amount)`
指定した色の彩度を下げます。

* `grayscale($color)`
指定した色をグレースケールに変換します。

* `complement($color)`
指定した色の補色を返します。

* `invert($color)`
指定した色を反転します。

## 透明度を操作する関数
* `alpha($color) / opacity($color)`
指定した色の透明度を返します。また、alpha() は、マイクロソフト独自の alpha(opacity=30) をサポートしているため、エラーになりません。


* `rgba($color, $alpha)`
あらゆる色の透明度を変更します。この関数は、RGB形式の色を操作する関数と同じです。

* `opacify($color, $amount) / fade-in($color, $amount)`
指定した色の透明度を下げてより不透明にします。不透明にした結果、値が1以上になった場合は、RGB形式で返します。

* `transparentize($color, $amount) / fade-out($color, $amount)`
指定した色の透明度を上げてより透明にします。

## その他の色を調整する関数
* `adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])`
RGB,hue,彩度,明度...あらゆる色の値を一度に調整出来ます。

* `scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])`
現在の値から最大値までの変化の割合を指定して操作します。指定できる値は、`adjust-color()` と同じです。

* `change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])`
指定した色の値を変更出来ます。指定できる値は、`adjust-color()` と同じです。

* `ie-hex-str($color)`
指定した色を、IE独自実装のfilterプロパティで利用できる形式に変換します。

## 文字列を操作する関数
* `unquote($string)`
文字列からクォーテーションを取り除きます。

* `quote($string)`
文字列にクォーテーションを追加します。

## 数値を操作する関数
* `percentage(value)`
指定した数値をパーセント形式に変換します。

* `round($value)`
指定した数値を四捨五入した値を返します。

* `ceil($value)`
指定した数値の切り上げをした値を返します。

* `floor($value)`
指定した数値の切り捨てをした値を返します。

* `abs($value)`
指定した数値の絶対値を返します。

* `min($x1, $x2, c)`
指定した複数の値のうち、最小値を返します。

* `max($x1, $x2, c)`
指定した複数の値のうち、最大値を返します。

## リストを操作する関数
* `length($list)`
指定したリストの項目数（半角スペースで区切られた数）を返します。

* `nth($list, $n)`
指定したリストの内、N番目にある値を返します。

* `join($list1, $list2, [$separator])`
2つのリストを一つに結合します。

* `append($list1, $val, [$separator])`
リストの最後に単一の値を追加します。

* `zip($list1, $list2, c)`
複数のリストを、一つの多次元リストに統合します。

* `index($list, $value)`
リストの中のある値を見つけ出しそのインデックスを返します。値がない場合は `false` を返します。

## 内部的な値を確認する関数
* `type-of($value)`
変数のデータタイプを返します。

* `unit($number)`
指定した数値に関連した単位を返します。

* `unitless($number)`
指定した数値に単位があるかどうかを返します。単位の有無に寄って `true` か `faluse` を返します。

* `comparable($number-1, $number-2)`
指定した2つの数値が、比較・追加可能かどうかを返します。

## 条件に応じて値を出し分ける関数
* `if($condition, $if-true, $if-false)`  
`$condition`の条件が、真なら `$if-true` の値を、偽なら `$if-false` の値を返します。