【良記事まとめ】初心者におすすめ!「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も覚えたらめちゃくちゃ便利です。

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

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

0




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

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

ABOUTこの記事をかいた人

よざっち

神奈川生まれ、沖縄育ちの31歳。 中学・高校時代は卓球部で汗を流し、大学時代はサークルでミュージカルに熱中していました。 大学卒業後は何年か役者やってましたが、今はWEB制作会社で働いています。たまにイベントスタッフも。 トラベラーズノートやほぼ日手帳などの手帳も大好きです。   >>詳しいプロフィール >>よざっちの欲しいものリスト