sass 

# 参考URL

### 公式サイト
http://sass-lang.com/

### sassで使える関数
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

# sassの導入

ruby方式で書くsassが初めに導入されたがデザイナーに不評の為
scssが導入された。

```shell
gem update --system
```

```shell
gem install sass
```
# scss compile

### 基本的なコンパイル

```shell
sass main.scss:maincss
```

### インデント綺麗にコンパイル

```shell
sass -style expanded scss/main.scss/css/main.css
```

### scssの監視して更新されたら自動コンパイル

```shell
sass --style expanded -watch sass:css
```

# コメントの書き方

```scss
// コメントがcssに表示されない

/* コメントがscssに表示される */
```

# 書き方

### アクション要素　`&`

```scss
span{
    background-color: #464646;

    &:hover {
        font-weight: bold;
    }
}
```

### 変数（数値、文字列、真偽、色、リスト）

#### 宣言

```scss
$baseFontSise: 14px;
```

#### 計算

`#{...}`は{ }内を評価しろという指示。

```scss:scss
$baseFontSise: 14px;

font-size: $baseFontSise - 2px;

font-size: #{$baseFontSise - 2px};
```

```css:css
font-size: 12px;
```

#### 文字列の連結

```scss:scss
$imgDir: "../img/";

background: url($imgDir + "bg.png");
// or
background: url("#{$imgDir}bg.png");
```

```css:css
background: url("../img/bg.png");
```

#### 色

```scss:scss
$brandColor: rgba(255,0,0,9);
```

##### lighten　（darken）

```scss:scss
color: lighten($brandColor, 30%);
```

```css:css
color: #ff9999;
```
## 条件分岐

```scss:scss
$debugMode: true;

@if $debugMode == true{
    color: red;
} @else if $debugMode == false {
    color: green;
} @else {
    color: black;
}
```

```css:css
color: red;
```

## loop

### for

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

```css:css
.fs12 {
  font-size: 10px;
}

.fs13 {
  font-size: 10px;
}

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

### while

```scss:scss
$i: 15;
@while $i < 18 {
    .fs#{$i} {font-size: 10px;} 
    $i: $i + 1;
}
```

```css:css
.fs15 {
  font-size: 10px;
}

.fs16 {
  font-size: 10px;
}

.fs17 {
  font-size: 10px;
}
```

## list

```scss:scss
$animals: cat, dog, tiger;

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

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

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

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

## debug

```scss:scss
@debug $columnWidth;
```

```shell:shell
DEBUG: 932px
```

## 関数

> scope `$totalWidth`と`$columnCount`はglobal変数
@function 内の変数はfuction内のみ


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

@function getColumnWidth($width, $count) {

    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}

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

```css:css
.grid {
  float: left;
  width: 85px;
}
```
## fileの分割

作成
_settings.scss
_functions.scss

```scss:scss
@import 'settings';
@import 'functions';
```

## mixin(ミックスイン)

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

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

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

## extend(継承)

> `mixin`との違いは継承していることを明示的にできることと、
mixinの場合`include`のした内容を重複してCSSに記載する為、効率的でない。

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

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

}

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

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

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}
```