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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

クラウドワークスで案件を探したり、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も覚えたらめちゃくちゃ便利です。

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

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

\ このブログのWordPressテーマはこちら!! /

\ アナタの”やってみたい”の
チカラになるプロが見つかる! /

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次