SASSとSCSS - yuki_natoriのブログ

　CSSの記述方法でSASSとSCSSというものがあります。CSSはコードが長くなったりすると見易さに難点が出てきたり、トップページなどを作成する際など膨大なCSSの記述に時間が掛かったりします。

　SASSとは？

”Syntactically Awesome StyleSheet”の略でSassを利用することで、CSSを効率的に書けるようになります。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。

SASSとSCSSがありますが、どちらも同じ”サス”でCSSの表記に若干の違いがあります。

SASS

SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴です。

```

.body p
 color: #333
 font-size: 15px
 font-weight: normal
 strong
 color: red
 font-weight: bold

```

SCSS

CSSの表記と似ていますが、SCSSの場合だとネストして続きが書けるため、コードを効率よく書けます。CSSの記述方法とも似ているため、現在はSCSSが主流となっているようです。

```

.body p {
 color: #333;
 font-size: 15px;
 font-weight: normal;
 strong {
 color: red;
 font-weight: bold;
 }
}

```

CSSでよく使用する色や数字などに変数を使用することができます。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができます。変数を定義するには、$変数名: 値;のように記述します。

パーシャル

　パーシャルで機能や内容ごとに管理ができるようになります。一つのファイルに全てのスタイルを書くと膨大な記述になり、可読性が悪くなります。一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。

下記のファイルだと上、中、下でCSSファイルを分割して分けています。

```

application.scss

@import "itemsview/new.items";
@import "itemsview/buy-header";
@import "itemsview/buy-footer";

```

&(アンパサンド)を使うことにより親のセレクタを参照することができます。

```

// タイトル
.main-title {
 padding: 260px 280px 400px 280px;
 background: #4DB09B;
 &__conteiner {
 text-align: center;
 margin: 0 122px;
 h1.title {
 color: whitesmoke;
 font-size: 49px;
 margin-bottom: 30px;
 }
 p.title {
 color: whitesmoke;
 }
 }
}

```

SASSは最初こそ使いにくく、分かりずらいと感じると思いますが、慣れていくとCSSに戻ろうとは考えないと思います。それくらい便利です！