WESEEK Tips wiki

{{pagename}} - {{sitename}}

# Sass
CSS を拡張したメタ言語、CSS のスーパーセット。読まれる際に CSS に変換（コンパイル）される。SASS と SCSS の二つの記法がある。どちらもセレクタをネストしてかける、関数表現ができるなどが可能。


## [SASS](./Sass/SASS)
中括弧 `{}` やセミコロン `;` を省略し、インデントを用いてセレクタをネストしてかける。
```sass:.sass
div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red
```

コンパイルすると

```css:.css
div {
    margin: 0 auto;
}

div p {
    padding: 20px;
}

div p span {
    font-color: red;
}
```


## [SCSS](./Sass/SCSS)
SASS の、 CSS との互換性が少ないという欠点を補った記法。SASS でできることは基本的に書くことができるが、インデント構文ではなく `{}` によって構成され、`;` も必要とする。
```scss:.scss
div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}
```

コンパイルすると

```css:.css
div {
    margin: 0 auto;
}

div p {
    padding: 20px;
}

div p span {
    font-color: red;
}
```


参考: https://uxmilk.jp/38084
