sassに関して


##ソース
- 公式サイト:http://sass-lang.com/
- リファレンス:http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
- builtin-functions: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

##saasの概要
- cssを効率的に書くための記法
- 二つの記法(sass/scss)
	-> sassは少しデザイナーに不評だった。

##sass環境構築
`sudo gem update --system`
`sudo gem install sass`
これでインストールされる。

##動作の記法
`.scss -> .sass -> .css`  


```scss/main.scss
//comment
/* comment */
#main {
  width: 90%;
  p{
    font-size: 16px;
  }
}
```


##実行方法
`$ saas scss/main.scss:css/main.css`

構造が字下げされててわかりにくいのを直す
`$ --style expanded`

.scssに変更があったら自動で.cssに変更を与えるためのコマンド(watchオプション)
`$sass --style expanded --watch scss:css`
以下が表示される

`>>> Sass is watching for changes. Press Ctrl-C to stop.`
この操作をするとsassを修正すると変更がcssにも反映される

##saasの基本
- ネスト構造(入れ子)/コメント記法（/* ... */, //）

```scss/main.scss
//comment:変換したcssに反映されない
/* comment */:cssに反映される
#main {
  width: 90%;
  p{
    font-size: 16px;
    a{
      text-decoration: none;
      &.hover {
        font-weight: bold;
      }
    }
  }
}
``` 

- 入れ子の構造の中の「&」 
「&」は、入れ子の構造の中でこれが使われたら、「その親要素のセレクタを表す」

###saas内での変数宣言、初期化
- 変数:データにつけるラベル
- データ型:数値、文字列、真偽、色、リスト）


```scss/main.scs
//comment
/* comment */
$baseFontSize: 14px;

#main {
  width: 90%;
  p{
        font-size: $baseFontSize;
   }
}
```

これを変換
`$ sass --style sepanded --watch scss:css`


```css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  font-size: 14px; }

/*# sourceMappingURL=main.css.map */
```

### 数値の計算

```scss/main.scss
//comment
/* comment */
$baseFontSize: 14px;

#main {
  width: 90%;
  p{
        font-size: $baseFontSize;
        .sub{
                font-size: $baseFontSize - 2px; /*この部分で変数から2px引く*/
        }
   }
}
```

`saas --style expanded scss/main.scss:css/main.css`
変換すると

```css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  font-size: 14px; }
#main p .sub {
  font-size: 12px; } /*ここの部分が計算されている*/
```

###文字列

```scss/main.scss
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url($imgDir + "bg.png")
  p{
        font-size: $imgDir - 2px;
   }
}
```

変換:`saas --style expanded scss/main.scss:css/main.css`

文字列の連結がされる

```css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;/*こんな感じで連結される*/
  background-font-size: "../img/"-2px; }
```

###文字列の中で変数展開したい場合

```scss/main.scss
/* comment */
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url("#{$imgDir}bg.png")
  p{
        font-size: $imgDir - 2px;
   }
}
```

これで先ほどのものと同じ結果になる

```css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;/*こんな感じで連結される*/
  background-font-size: "../img/"-2px; }
```

- #{}の意味：波かっこの中を評価しなさいという意味

```scss/main.scss
/* comment */
//$baseFontSize: 14px;

$imgDir: "../img/";

#main {
        width: 90%;
        background: url("#{$imgDir}bg.png")
  p{
        font-size: #{12+ 12}px;
   }
}
```

これで文字列だけでなく数字も#{}で評価される

```css/main.css
/* comment */
#main {
  width: 90%;
  background: url("../img/bg.png") p;
  background-font-size: 24px; }
```

###変数宣言(色)

```scss/main.scss
$brandColor: #red;

#main {
        width: 90%;
  p{
        color: $brandColor;
        font-size: #{12+ 12}px;
   }
}
```

```css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  color: #red;
  font-size: 24px; }

```

- lighten/darken

```scss/main.scss
$brandColor: rgba(255,0,0,0.9);

//lighten darken

#main {
        width: 90%;
  p{
        color: lighten($brandColor, 30%);
        font-size: #{12+ 12}px;
   }
}

``` 

cssが数値で変更されている。

```css/main.css
/* comment */
#main {
  width: 90%; }
#main p {
  color: rgba(255, 153, 153, 0.9);
  font-size: 24px; }
```

- builtin-functions
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html


###@if文

```
// @if @else

$debugModel: true;

#main {
        @if $debugModel == true {
                color: red;
        } @else {
                color: green;
        }
}
```

`saas --style expanded scss/main.scss:css/main.css`
で実行
`less css/main.css`

```css/main.css
#main {
  color: red; }
```

数値だけでなく文字列でも使える

```scss/main.scss
$debugMode: true;
$x: 30;

#main {
    @if $debugMode == true {
        color: red;
        p {
        @if $x > 20 { color: yellow; }
        }
    } @else {
        color: green;
    }
}
```

```css/main.css
#main {
  color: red; }
#main p {
  color: yellow; }
``` 

###@for/@while

```scss/main.scss
//loop
//@for
//@while

//.fs 10 (font-size: 10px;)

@for $i from 10 through 14 {
        .fs#{$i}{ font-size: #{$i}px; }
}

$i: 10;
@while $i <= 14 {
        .fs#{$i} { font-size: #{$i}px;}
        $i: $i + 1;

}
```

```css/main.css
.fs10 {
  font-size: 10px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs13 {
  font-size: 13px; }

.fs14 {
  font-size: 14px; }

.fs10 {
  font-size: 10px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs13 {
  font-size: 13px; }

.fs14 {
  font-size: 14px; }
```

##リスト
似たようなデータをまとめて管理できるデータ型

- @each:ループ

```scss/main.scss
$animals: cat, dog, tiger;

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

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

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

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

```

##複数の処理をまとめる関数: @function/ @return

```scss/main.scss
//関数

$totalWidth: 940px;
$columnCount: 10;

@function getColumnWidth($width, $count) {
    // $columnWidthの計算をする
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

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

- @debugを使うとsassを変換した時点で数値を出してくれる

```
>>> Change detected to: scss/main.scss
scss/main.scss:10 DEBUG: 85px
      write css/main.css
      write css/main.css.map
```

```css/main.css
.grid {
  float: left;
  width: 85px; }

```

###ファイル分割

- 「_」(pertials(パーシャルズ)：部分ファイル) :「_」で始まるファイルは部分的なファイルとして認識されるので、css に変換する時に一緒にあわせてくれて、1 つの main.css を作ってくれます。

- @import
これをmain.scssの文頭に置いて、パーシャルズ(部分ファイル)を連結させる.
「_」(pertials)でファイルを分割してみる。

- 分割前

```scss/main.scss
//関数

$totalWidth: 940px;
$columnCount: 10;

@function getColumnWidth($width, $count) {
    // $columnWidthの計算をする
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

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

- 分割後  
パーシャルズ
(分割ファイル)をいくつか作ってmain.scssで連結させる

```scss/main.scss
@import "settings";
@import "functions";

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

```scss/_settings.scss
$totalWidth: 940px;
$columnCount: 10;
```

```scss/_functions.scss
@function getColumnWidth($width, $count) {
    // $columnWidthを計算する
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}
```

###@mixin
- @mixin:設定をまとめて管理できる機能
- @include:@mixinを呼び出す
- mixinは引数を持つ(初期値をつけることもできる)

角丸の要素を複数につけたいとき

```scss/main.scss
//mixin

@mixin round($radius) {
        border-radius: $radius;
}

.label {
        font-size: 12px;
        @include round(5px);
}
```

@include roundにある値がmixinの引数に入って表示される。

```css/main.css
.label {
  font-size: 12px;
  border-radius: 5px; }
``` 

また、mixinは初期値を持つこともできる。

```scss/main.scss
//mixin

@mixin round($radius:4px) {
        border-radius: $radius;
}

.label {
        font-size: 12px;
        @include round();
}
```

```css/main.css
.label {
  font-size: 12px;
  border-radius: 4px; }
```


###@extend
スタイルを継承していくことができる。

共通部分を@extendでまとめる

```scss/main.scss
// @extend

//.errorMsg
//.warningMsg

.msg {
        font-size: 12px;
        font-weight: bold;
        padding: 2px 4px;
        color: white;
}

.errorMsg {
        @extend .msg;
        background: red;
}

.warningMsg {
        @extend .msg;
        background: orange;
}
```

```css/main.css
.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white; }

.errorMsg {
  background: red; }

.warningMsg {
  background: orange; }

``` 


###@mixinと@extendの違い
- 明示的論理的に継承していることを表記した方が可読性が高い
- @mixinだと重複する処理が多い。