【覚書】SASSとかSCSSとか_#1

mgr

2019年1月17日 23:27

最近フロントエンドの案件を業務で初めて頂くことができたので、意気込んで事前知識習得しようとしてるmgrことモグラです。
※普段はサーバサイドとか運用とか管理業務とか色々やってます。念願のフロントエンド。

その中で、githubに上がってるソースコードをぼんやり眺めてたんですが、

style.scss

とかいう拡張子のファイルがありました。

「あー、scssね知ってる知ってる HAHAHA!!」

と少し思ったけど、よう知らんなと。というわけで調べました。

記事をご覧いただく前に

Sassのことをよく知らんおじさんが調べた情報を整理してみた内容になるので、

「違うよ！！！！！！！」

と思ったらご指摘ください。

SASS? SCSS?

もうこの時点で違いなんて知らんかったとですよ。

もうあれ、「JSで言う所のReactとかVueとかそういうアレっしょ」くらいのテンションだったわけですね。

「Google先生に聞くしかねえなこりゃ！」

というわけで。

よくありそうな検索ワード。

【SASSとSCSSは大元は同じもの】

このQiitaのページでおっしゃってるのが一番わかりやすいのかも。

- Sassは「Syntactically Awesome StyleSheet」
　・要はかっちょええCSSのことなのだと。
- Scssも元をたどればSassのこと。
- わかりにくいけれど、「SASSとSCSS」みたいに同列にした時はあくまでもSassとして表現する時の記法の違いのことらしい。
　・SASS記法
　・SCSS記法

【じゃあ記法って何が違うん】

次の疑問はこれですよね。

比較対象として、以下のような普通のCSSがあったとして。

div {
    background-color: #000;
}

div span {
    font-size: 2em;
}

SASS

SASS記法の場合は
・拡張子は「.sass」
・"{}"のような括弧による入れ子がない
・インデントで依存関係を示す
・セミコロンはいらない
こんな感じらしいです。

ちゅうことはこんな感じになりますね。

div 
    background-color: #000;
    span 
        font-size: 2em;

だいぶスッキリかけましたね。

SCSS

SCSS記法の場合は
・拡張子は「.scss」
・従来のCSSライクな書き方ができる
　・括弧を使った入れ子構造
　・セミコロンもつく

もともと扱っていた言語次第ではこっちの方がわかりやすい人もいるかもしれないけど、個人的には括弧でちゃんとわかるようにしたい...

そんなあなたにコチラ!!!(cv: ジャ◯ネットTKT) 的な表現方法。

div {
    background-color: #000;
    span {
        font-size: 2em;
    }
}

個人的には、こっちの方が書きやすいです。

従来のCSSっぽいというのもそうなんですが、

Javaとか触ってきてたので、
ブロックごとに役割が明確になってるように見える
ということが心に平穏をもたらしてくれます。いいね500億回くらい押したい。

Sass(SASS, SCSS)が使えたら嬉しいことは？

記法が変わる！！いいね！！

だけだとメリットもうっすいので、何かあるでしょうという。

調べておおよそ出てくるのはこんなところでしょうか。

- 変数が使える！ (同じCSS定義は変数に集約できる)
- 演算を使える！ (変数を使って演算ができる)
- 関数を使える！ (演算ができるのでそういった特性を活かすんだと思う。きっと良い。)
- 「@import」で他のscss(sass)ファイルを読み込める
- 「@extend」でCSS定義をした要素やclassの定義内容を継承することができる
- 「@mixin」で引数を扱うことができる (「@include」で、「@mixin」で定義したスタイルを使うことができる)

一気にプログラムチックな感じがしてウットリしちゃいますなあ。

というわけでまだまだ長くなりそうなので、次回に持ち越しで。

便利な機能の掘り下げを次回以降やっていこうかなあと思います。勉強勉強。

まとめ

・SASSだのSCSSだのは大元をたどればSassのこと
・SassはイケてるCSSなんだなくらいに思っときます
・Sassは超便利part1！これでCSSもスッキリさせられそう！
・Sassは超便利part2！続きは次回！

参考資料

この記事が気に入ったらサポートをしてみませんか？