【良記事まとめ】初心者におすすめ!「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には、

  • SASS
  • SCSS

の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でコードを書くための準備

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

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

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

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

ホント、超便利。

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

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

live sass compiler

easy sass

Sass(SASS,SCSS)の基本的な書き方

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

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

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

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

スポンサーリンク




シェアしてくれたら嬉しくて小躍りします。

記事の感想はこちらから。

ABOUTこの記事をかいた人

よざっち

神奈川生まれ、沖縄育ちの30歳。 中学・高校時代は卓球部で汗を流し、大学時代はサークルでミュージカルに熱中していました。 今はイベントスタッフと書店員の仕事で生計を立てるフリーター。 トラベラーズノートやほぼ日手帳などの手帳も大好きです。   >>詳しいプロフィール >>よざっちの欲しいものリスト