[css]Sassの便利な点をまとめてみた〜書き方編〜｜blog（スワブロ）

[css]Sassの便利な点をまとめてみた〜SASSとSCSSの違い編〜

2019.03.14

むったん

ども、六崎です。

花粉症のみなさん、いかがお過ごしでしょうか？
もれなく六崎も花粉症で、今年で24年目となります。
物心ついた頃には花粉症だったので、平和な春を知りません…

さて、今回は「Sassの便利な点をまとめてみた」ということで、久しぶりのシリーズ物で行こうと思います。

Sassの便利な点をまとめてみた

SASSとSCSSの違い　←今回はこれ
Sassの便利な機能
Sassのコンパイルと出力形式

みなさん、Sassって知ってますか？
ちなみに私は5年前くらいから使い始めました。

当時の先輩に「六崎さん、Sassって知ってる？」と聞かれたことがきっかけ。
それまでCSS一本で来ていた私にとっては未知の生命体。

教えてもらって一発目の言葉が「先輩、これ…ヤバイっすね！」でした。
↑11歳離れてる先輩に「ヤバイっすね」で片付ける笑

何がヤバイって…
cssでは事細かにIDやclassを書いていたのがネスト（入れ子）で書いていける！
演算が使える！（電卓叩いて計算しなくて済む
変数が使える！（同じ色や値を連続で書かなくて済む

本気でコーディングしていると、夢中になりすぎて指痛くなるし、頭爆発してるし、16進数の値覚えられなくてPs（フォトショップ）やAi（イラストレーター）を開いては確認してで、画面行ったり来たりでイライラしてたの←当時の話。
そんなことをしなくて、スムーズにコーディングできるって素晴らしいじゃないですか！

…と、いうことで早速勉強して今でも活かしている次第です(๑`·ᴗ·´๑)

Sassとは？

Sass = Syntactically Awesome Stylesheets
Google先生は「文法的に素晴らしいスタイルシート」と訳してくれましたw

Sassとは、「CSSに対して機能を拡張した言語」です。
つまり、CSSをより効率的に書けるようにした言語…ということですね！

書き方の違い

やっと本題です（笑）

Sassには、2種類の書き方があります。

SASS記法
SCSS記法

実際にどのように書くか見ていきましょう。
例として、1番目の文字が赤色、2番目以降がグレーのリストを作成したとします。
リンク文字は青で、ホバーすると薄青になる設定です。

SASS記法

style.sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

=list-design($color: #333, $fSize: 1.2em)
color: $color
font-size: $fSize

ul
list-style: none
margin: 10px 0

li
+list-design

&:first-of-type
+list-design(#ba1616, 1.4em)

a
color: #4298f4

&:hover
color: #89b6ff

Sassがもともと採用していた記法だそうです。
メリットは記述がとてもスマートなこと！！
rubyに慣れてる方は、こちらの方が書きやすい…とか?

私はSCSS派なんですが、SASSを書いてみると…慣れちゃえばこっちの方がラクだなと感じます。٩(ˊᗜˋ*)و
後日、使い方については説明しますが”@mixin”や”@include”が”=”とか”+”でOKっていうのがスマートっすね！

さて、書き方は

セレクタ後ろの括弧（ { } ）を省略
プロパティの後ろのコロンの次に半角スペースをいれる
値後ろのセミコロン（ ; ）を省略

と、いう感じになっています。

SCSS記法

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@mixin list-design($color: #333, $fSize: 1.2em) {
color: $color;
font-size: $fSize;
}

ul {
list-style: none;
margin: 10px 0;

li {
@include list-design();

&:first-of-type {
@include list-design(#ba1616, 1.4em);
}

a {
color: #4298f4;

&:hover {
color: #89b6ff;
}
}
}
}

SCSSはSASSがCSSとの互換性が乏しかったために作られた記法だそうです。
メリットは何と言っても、CSSの書き方がそのまま使えること！！
CSSで慣れていると、断然SCSSが見やすいし、書きやすいと思います。

書き方は

括弧（ { } ）を使って、入れ子構造にして依存関係を示す

うん、簡単w

そして、上記2つのコードをコンパイルすると以下のようになります。

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

ul {
list-style: none;
margin: 10px 0;
}

ul li {
color: #333;
font-size: 1.2em;
}

ul li:first-of-type {
color: #ba1616;
font-size: 1.4em;
}

ul li a {
color: #4298f4;
}

ul li a:hover {
color: #89b6ff;
}

こんな長ったらしいcssがあんなにスマートに書けるって、Sassって凄いですよね！

いかがでしたでしょうか。
次回はSassの便利な機能についてご紹介していきます！

ではっ！

↓↓↓ぜひチェックしてください