【良記事まとめ】初心者におすすめ！「Sassを使う為の準備」「基本的な書き方」

クラウドワークスで案件を探したり、codepenでCSSアニメーションを調べていると、よく見かけるSassの文字。

役割的にはCSSのはずだけどコードを見ると、知っているものと少し記法が違います。

「え？CSSじゃないの？」と思い、調べてみるとSassとは、

Sass「Syntactically Awesome StyleSheet」

Syntactically　＝　構文的に
Awesome　＝　イケてる
StyleSheet　＝　スタイルシート

出典：これからはcssはSassで書こう。

とのこと。

ざっくりいうと、SassはCSSをより効率よく書きやすくした言語。

実際に使ってみるとこれがとても便利で、しかも楽しい。そこで僕がSassを使うにあたって、参考にした記事をまとめてみました。

同じ「Sassってなに？」と思っている初心者のお役に立てれば。

Sassって何なの？

Sassとは、CSSを拡張したメタ言語です。メタ言語と言っても馴染みがないかもしれませんが、メタ言語とは、「ある言語について何らかの記述をするための言語」です。

Sassとは？ Sassの基本について/UX MILK

Sassには、

の2種類があります。

SASSはSassの書き方の1つ、これめっちゃややこしいですよね(笑)

2つの記法の違いはこんな感じです。

div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}

SCSSは入れ子構造（ネスト）を主とし、

div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;

SASSはインデントを主とした記法です。

SASSには｛｝も；も要りません。インデントだけで要素の親子関係を表します。もうびっくり。

一方SCSSは入れ子構造になりますが、基本的にCSSに近いので抵抗なく使えると思います。

より詳しく知りたい方はこちらの記事を。

Sassでコードを書いても実際にWeb上で表示するために必要なのはCSSです。

Sassで書いたコードは、一度CSSにコンパイル（翻訳）しないといけません。

そのために必要なのが環境構築。

VS codeであれば拡張機能を入れるだけで、あとは自動でやってくれます。

ホント、超便利。

VS codeでは「live sass compiler」と「easy sass」の2つがメジャーみたいです。

ちなみに僕は「live sass compiler」と使っています。

拡張機能をインストールしたら、あとはコードを書くだけ。

CSSにより近いSCSSの方が人気らしいですが、SASSも覚えたらめちゃくちゃ便利です。

これを使うと、書くコードの数が減って本当に衝撃。

変数も使えたり色々と面白いので、試しに使ってみてください。

この記事が気に入ったら
フォローしてね！

Follow @temitarz

よかったらシェアしてね！