【初心者向け】ここから始める「Sass」の使い方まとめ【初心者向け】ここから始める「Sass」の使い方まとめCSSの記述を効率化し、メンテナンス性も向上するSassの導入から基本的な使い方までまとめました。対象の方は下記のとおりです。Sassで書きたいけどコンパイルがよく分からないSassをコンパイルできるようになったけど、書き方が分からないCSSはある程度理解できたので次のステップに進みたいSassはCSSを拡張した言語なので、まずはCSSをある程度扱えるようになってからSassに挑戦した方がいいでしょう。1つずつご紹介していきます。変数を使う変数を使うメリット変数の使い方よく使われるSassの変数まとめSass(サス)とはSassとは、CSSのメタ言語と呼ばれるもので、普通にCSSを記述する場合と比べると下記のようなメリットがあります。作業効率が向上するコードの記述量が減るコードのメンテナンス性が高まるWeb制作の現場ではCSSをそのまま記述するのではなく、SassのようなCSSのメタ言語を使用することが当たり前になっています。ある程度CSSの知識を持っていないとSassを使いこなすことはできないので、初心者の方はCSSから覚えていかなければなりませんが、ある程度CSSの知識が付いてきたらSassに挑戦してみるのがいいでしょう。Sassを使うための準備Sassで書いたスタイル定義は.scss、もしくは.sassという拡張子のファイルに保存します。HTMLから直接Sassのファイルを読み込むことはできないので、「コンパイル」という処理を行ってCSSファイルに変換しなければなりません。CodeやPrepropsなど、初心者でも簡単に使えるツールを使えばそこまで難しくありません。詳しくは下記のページでご紹介しています。trendsSassのGUIコンパイラは「Prepros」がおすすめ!使い方と機能のまとめSassに挑戦しようと思ったけどコンパイルのための環境構築が難しそうでやめてしまった方も多いのではないでしょうか。trendsSCSSとSASSSassには、「SCSS」と「SASS」という2つの記法があります。どちらも使える機能やできることに違いはありませんが、書き方が異なります。bold;}というCSSを書きたい時は、それぞれ下記のようになります。bold上記のように、SCSSはCSSによく似た形で記述を行います。一方で、SASSは括弧やセミコロンが無く、CSSとは少し異なる形でコードを記述します。普段CSSを書いている人にとっては、SASSはあまり見慣れない形式だと思います。コードが短くなるというメリットがありますが、少し読みづらいという意見も多いのがSASS記法の特徴です。一般的にはSCSSが使われているため、以下ではSCSSを使ってご説明していきます。Sassの基本的な使い方では、CSSではなくてSassでスタイルを定義することによって使うことのできる便利な機能をご紹介していきたいと思います。ネスト(入れ子)Sassを使うと、スタイル定義をネストして記述することができるので、コード的にも見やすく、かつ記述量を減らすことができます。慣れるまでは少し違和感を感じるかもしれませんが、慣れてしまえばCSSよりも分かりやすく、管理の行き届いたコードを書くことができるようになります。何より、コードの記述量を減らすために一番役立つのがネストで、これによって作業効率を大きく向上させることもできます。一言にネストと言っても、いくつかの種類に分かれています。.boxのように入れ子になっているセレクタにスタイルを当てる場合に使用します。SCSSでは、下記のようにセレクタをネストさせて記述することができます。red;}}}.containerセレクタの中に.itemセレクタがあり、さらにその中に.boxセレクタが書かれていますね。これをコンパイルすると下記のようなコードになります。red;}このように、子孫セレクタを指定してスタイルを定義する場合は、親セレクタの括弧の中に子セレクタを設置することによって記述することができます。プロパティのネスト例えば、下記のようなコードがあるとします。sans-serif;}Sassの場合は、下記のように記述することができます。sans-serif;}}font-*のプロパティをネストでまとめることによって、記述量を減らすことができ、さらにfontに関するスタイル定義をまとめることができるので、直感的に分かりやすくメンテナンス性も向上します。fontだけではなく、backgroundやborderなど、様々なプロパティをネストして記述する事が可能です。.container.itemのように複数クラスを指定してスタイルを記述する場合があると思います。そのような場合は、下記のように記述します。red;}}単純にセレクタをネストする場合は「&」無しで記述していましたが、親セレクタを参照する場合は「&」を先頭につけて記述します。「親セレクタの参照」という言葉のせいで難しく感じるかもしれませんが、簡単に言ってしまえば下記のようになります。&マークなし親セレクタと子セレクタの間に半角スペースが1つ作られる&マークあり親セレクタと子セレクタの間にスペースが作られない使っているうちに慣れてくると思いますが、最初は上記のように覚えておくといいでしょう。ネストの注意点ネストは何重にも作ることができますが、あまりネストが深くなってしまうと生成されるCSSのコードが複雑になってしまうため、あまり深く作らない方がいいです。Sassを書いているうちに感覚がつかめてくると思いますが、最初はあまり深くネストしすぎないように気を付けて書いてみてください。変数を使うCSSでも変数を使うことはできますが、一部のブラウザで対応していないなど、実際の案件であまり使われることはありません。Sassを使えばブラウザに依存せず変数を使ってスタイル定義を行うことができます。変数を使うメリット変数を使うことによって、どのようなメリットがあるのでしょうか。変更に強いコードが書ける変数を使用することによって、変更に強いコードを記述することができます。メインカラーを$main-colorのような変数に指定しておけば、後で色の変更が入った場合でも変数の値を書き換えるだけで済むため、時間をかけずに修正することができますね。複数人での作業が行いやすくなる変数を外部ファイルで指定しておけば、チームで作業する場合に非常に役立ちます。Sassには外部のSassファイルをインポートすることができるため、共通して使用するファイルにグローバル変数を定義しておき、それを読み込むようにしておけば全員同じ環境でコーディングを行うことができますね。変数を使えるようにするために、まずは変数の定義を行います。「$」を頭に付けることで、変数を宣言できます。$main-color;}上記のコードをコンパイルすると、下記のようなCSSが出力されます。#123456;}で$main-colorとして定義したカラーコードが.boxのbackgroundの値に入っていますね。カラーコードやフォントファミリー、ブレークポイントなど、何度も使用するような値は変数として宣言しておくと、作業効率とメンテナンス性が向上します。使われるSassの変数では、実際にSassの変数はどのような場面で使われるのでしょうか。良く使われる例をご紹介します。ブレークポイント(メディアクエリ)ブレークポイントを変数として宣言しておくと、いちいち数値を手で打ち込む必要がなくなるため、ブレークポイントの数値を覚える必要がなくなり、ミスも防ぐことができます。{....}@mixinを使ってさらにブレークポイントを管理しやすくするテクニックもありますが、まずはブレークポイントの変数化ができるということを押さえておきましょう。色の定義スタイルガイドやデザインシステムによって予めカラーが定義されている場合は、それを変数として宣言しておきましょう。カラーコードを変数として使用する場合は、下記のような記述となります。$primary;}こうすることによって、カラーが変更された時も一箇所修正すれば対応することが可能になります。フォントファミリーフォントファミリーも使用する場所で毎回同じ記述をするのはあまり得策ではありません。$font-family;}もちろん、bodyでフォントファミリーを一括指定する場合は必要ありませんが、サイト内で複数のフォントファミリーを使用している場合は変数によって管理すると便利です。まとめ今回ご紹介したSassの書き方は基本的なものですが、これだけでもそのままCSSを書く場合と比べればコードの記述量を減らすことができ、メンテナンス性も向上させることができます。この他にも、@extendや@mixinなどさらに便利なルールが用意されています。基本を押さえて、Sassに慣れるところから挑戦してみてください。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。