【Sass入門】Sass（SCSS）の使い方をわかりやすく解説！Sassの基本的な書き方と変換方法・導入のメリットも確認

Sass（SCSS）とは

Sass (Syntactically Awesome StyleSheet) は、CSSスクリプトを生成するためのメタ言語と呼ばれるものです。

Sassファイルを記述し、専用のツールを使用して「コンパイル」します。

CSSファイルを自動生成することが可能です。ちなみに「サス」と読みます。

Sassファイルについて

以下は、SassファイルをコンパイルしてCSSファイルを生成した時の各ファイルの内容を示した例です。

以後、変換前のSassファイル名をinput.scss、変換後のCSSファイル名をoutput.cssと表記します。

・input.scss

1. $width: 100px;
2. $height: 50px;
3. div {
4. width: $width;
5. height: $height;
6. }

・output.css

1. div {
2. width: 100px;
3. height: 50px;
4. }

SCSSとは

Sassと同様によく見かけるのがSCSSという用語ですが、Sassには記法としてSASSとSCSSの2種類が存在します

ファイルの拡張子はそれぞれ.sassと.scssです。

記法の違いとしては、SASSはSCSSにおけるブロックの括弧 ({}) と行末のセミコロン (;) を省略した形式となります。

・input.sass

1. $width: 100px
2. $height: 50px
3. div
4. width: $width
5. height: $height

・input.scss

1. $width: 100px;
2. $height: 50px;
3. div {
4. width: $width;
5. height: $height;
6. }

一般的にはCSSとの互換性の問題からSCSSの方が使用されることが多いです。

本記事でもコード例をSCSS記法で記載することとします。

Sassのメリット

Sassを使用することには、以下のようなメリットがあります。

記述の簡略化による開発効率の向上

Sassには一般的なプログラミング言語で見られるような、変数や繰り返しの機能が備わっているのです。

そのため、通常のCSSと比較して、短期間かつ簡潔にスタイルの記述を行うことができます。

保守性の向上

上記の特徴と重なる部分ですが、開発効率の良いコードはシステム運用時の保守やコード修正においても非常に扱いやすいものです。

従来のCSSではファイル全体を検索して修正していたコードがSassであれば、一箇所の変更のみで対応できるかもしれません。

CSSの上位互換

SCSS記法は、Sassの拡張機能を除けばCSSと同一になります。

そのため既存のCSSからの拡張も容易で、従来からのWeb開発者はSCSSの学習もスムーズに行えるはずです。

Sassのインストール

Sassファイルをコンパイルするためには、専用のツールをインストールすることが必要になります。

Sassツールは

• CUI 環境(コマンドプロンプト等) で動作するもの
• GUI 環境(ツールバー等) で動作するもの

の2タイプです。

使用するOS (Windows/Mac OS/Linux) によってインストール方法も違うので注意しましょう。

Sass公式サイトのダウンロードページか、他のインストール方法紹介ページを読んで、自分の環境に応じてインストールしてください。

今回はLinuxPCにRubyをインストールし、rubygemsでsassをインストールして動作検証て解説します。

Sassファイルの変換方法 (コンパイル)

Sassツールがインストールできたら、CUI環境で以下のコマンドを実行することで、CSSファイルを出力可能です。

• scss input.scss:output.css

コマンド実行の際にSassファイルの記述に誤りがあった場合は、コンパイルエラーの内容が表示されるので確認してください。

また今回はCUI環境で、input.scssが存在するディレクトリに移動している状態でコマンドを実行することを想定しています。

input.scssが存在するディレクトリを、絶対パスまたは相対パスで指定することも可能です。

Sass記法

それでは、Sassの基本的な機能とその記法を紹介します。

変数

変数は、C言語やJava等のプログラミング言語の経験のある方にとっては馴染み深い機能のはずです。

変数名と変数に格納する値を「$〇〇: △△」の形式で記述。

そして値を使用したい箇所に変数名を記述すればその値を使用することができます。

複数の要素に共通する値や、変更の可能性が高い・頻度が多い値に使用すると便利です。

・input.scss

1. $primary-font-family :Helvetica, sans-serif;
2. $body-max-width :1000px;
3. $main-color :#ffd;
4. $text-color :#444;
5. body {
6. font-family: $primary-font-family;
7. max-width: $body-max-width;
8. background: $main-color;
9. color: $text-color;
10. }
11. button {
12. background: $main-color;
13. color: $text-color;
14. }

・output.css

1. body {
2. font-family: Helvetica, sans-serif;
3. max-width: 1000px;
4. background: #ffd;
5. color: #444;
6. }
7. button {
8. background: #ffd;
9. color: #444;
10. }

変数を使用して、プロパティ名を構成することも可能です。

その場合、「#{(変数名)}」の記法により変数を展開します。

・input.scss

1. $app-name: myapp;
2. .#{$app-name}-main {
3. width: 800px;
4. border: solid 2pc #333;
5. }
6. .#{$app-name}-sub {
7. width: 400px;
8. }

・output.css

1. .myapp-main {
2. width: 800px;
3. border: solid 2pc #333;
4. }
5. .myapp-sub {
6. width: 400px;
7. }

また、変数には複数の値の組 (配列) を格納することも可能です。

後述する繰り返し記法と組み合わせると非常に便利になるでしょう。配列の使用例も「繰り返し」の項目で解説します。

ネスト

親子関係のある要素や、疑似要素のスタイルを指定する場合、ブロックのネストを使用しましょう。

要素名の記述の繰り返しを避けることができ、簡潔に記述できます。要素の対応関係が明確になり、保守性も向上するのでおすすめです。

・input.scss

1. ul, ol {
2. background: #efe;
3. margin: 20px 10px;
4. li {
5. line-height: 1.5em;
6. padding: 0.5em;
7. list-style: none;
8. }
9. }

・output.css

1. ul, ol {
2. background: #efe;
3. margin: 20px 10px;
4. }
5. ul li, ol li {
6. line-height: 1.5em;
7. padding: 0.5em;
8. list-style: none;

また、小要素が親要素の名前を参照したい場合、「&」を使用することができます。

・input.scss

1. button {
2. display: block;
3. width: 200px;
4. height: 50px;
5. background: #fff;
6. color: #444;
7. &:hover {
8. background: #f00;
9. color: #fff;
10. cursor: pointer;
11. }
12. &:active {
13. background: #fdd;
14. color: #fff;
15. }
16. }

・output.css

1. button {
2. display: block;
3. width: 200px;
4. height: 50px;
5. background: #fff;
6. color: #444;
7. }
8. button:hover {
9. background: #f00;
10. color: #fff;
11. cursor: pointer;
12. }
13. button:active {
14. background: #fdd;
15. color: #fff;
16. }

演算子

「+」や「-」のような算術演算子を使用して、計算した値をプロパティに設定することができます。

CSS3では「calc()」に相当するものですが、こちらのほうがより簡潔に記述できるでしょう。

ちなみに、掛け算は「*」、割り算は「/」、余りは「%」を使用します。

・input.scss

1. $item-width: 50px;
2. $item-number: 6;
3. .container {
4. display: flex;
5. flex-wrap: wrap;
6. justify-content: space-between;
7. width: $item-width * $item-number + 10px;
8. & .items {
9. width: $item-width;
10. }
11. }

・output.css

1. .container {
2. display: flex;
3. flex-wrap: wrap;
4. justify-content: space-between;
5. width: 310px;
6. }
7. .container .items {
8. width: 50px;
9. }

演算子を使用する場合の注意点として、CSS生成後の単位を確認するようにしましょう。

例えば、「50px * 50px」の計算結果は「2500px*px (平方ピクセル) 」のようになります。

条件分岐

「@if/@else」を使用して、特定の条件を満たす場合のみブロック内の記述を適用するのが条件分岐です。

「@else if」との組み合わせによって、3つ以上の条件分岐を記述することもできます。

また、条件部分には

• == (等しい)
• != (等しくない)
• and (かつ)
• or (または)

の論理演算子が使用可能です。

また変数に値がセットされているかどうかによって分岐したい場合、「@if 変数名 { … }」といった記述もできます。

・input.scss

1. $font-size: 24pt;
2. body {
3. @if $font-size > 18pt {
4. font-weight: 900;
5. } @else {
6. font-weight: 600;
7. }
8. }

・output.css

1. body {
2. font-weight: 900;
3. }

繰り返し

「@for 任意の変数名 from ◯ to(/through) △」の記法によって、指定した数値の範囲の中でブロック内を繰り返し記述することが可能です。

注意点として、「to」はその値を範囲に含まない、「through」はその値を範囲に含むという違いがあります。

場面に応じて、コードの意図が理解しやすい方を使用しましょう。

・input.scss

1. @for $i from 1 through 3 {
2. .item#{$i} {
3. width: 100px;
4. }
5. }

・output.css

1. .item1 {
2. width: 100px;
3. }
4. .item2 {
5. width: 100px;
6. }
7. .item3 {
8. width: 100px;
9. }

変数に値の配列を格納した場合、「@each 任意の変数名 in 配列名」の記法を使います。

配列の各値を一つずつ参照しながらブロックを繰り返し記述することが可能です。

・input.scss

1. $prefix-types: -moz-, -webkit-, -o-, -ms-, ”;
2. .animation-part {
3. @each $pref in $prefix-types {
4. #{$pref}animation: anime 3s ease 0 infinite;
5. }
6. }

・output.css

1. .animation-part {
2. -moz-animation: anime 3s ease 0 infinite;
3. -webkit-animation: anime 3s ease 0 infinite;
4. -o-animation: anime 3s ease 0 infinite;
5. -ms-animation: anime 3s ease 0 infinite;
6. animation: anime 3s ease 0 infinite;
7. }

@function

一般的なプログラミング言語にも備わっている関数の機能です。

Sassでは関数内で得られた値 (返り値) を使用する目的でのみ、関数が使用されます。

・input.scss

1. @function pow($base, $exp) {
2. $result: 1;
3. @for $i from 1 through $exp {
4. $result: $result * $base;
5. }
6. @return $result;
7. }
8. .image {
9. width: pow(2, 8) * 1px;
10. height: pow(2, 8) * 1px;
11. }

・output.css

1. .image {
2. width: 256px;
3. height: 256px;
4. }

@mixin/@include

「@mixin」を使用して、SCSSの構成部品を定義することができます。

定義したMixinを挿入したい箇所に「@include」を記述することで、SCSSコード内にMixinを展開することが可能です。

関数や後述の「@extend」と混同しやすいので注意してください。

C言語やLisp等のプログラミング言語に触れたことがある人は、「マクロ」といえばMixinのイメージがつかみやすいでしょう。

・input.scss

1. @mixin display-flex {
2. display: -webkit-box;
3. display: -ms-flexbox;
4. display: flex;
5. }
6. .flex-container {
7. @include display-flex;
8. }

・output.css

1. .flex-container {
2. display: -webkit-box;
3. display: -ms-flexbox;
4. display: flex;
5. }

Mixinの定義には引数やブロックを使用することも可能です。以下の例はMixinの定義に引数を使用したパターンになります。

引数には値が指定されなかった場合のデフォルト値も指定可能。

例では第2引数の$dispにはデフォルト値として「block」を指定しています。

・input.scss

1. @mixin circle($diameter, $disp: block) {
2. width: $diameter;
3. height: $diameter;
4. border-radius: 50%;
5. display: $disp;
6. }
7. .circle1 {
8. @include circle(50px, inline-block);
9. }
10. .circle2 {
11. @include circle(100px);
12. }

・output.css

1. .circle1 {
2. width: 50px;
3. height: 50px;
4. border-radius: 50%;
5. display: inline-block;
6. }
7. .circle2 {
8. width: 100px;
9. height: 100px;
10. border-radius: 50%;
11. display: block;
12. }

@extend

Java等のプログラミング言語で、「オブジェクト指向」について学んだことのある方にとっては馴染み深い「継承」の機能といえます。

一度記述した要素のスタイルを、他の要素のスタイル記述時に再利用したい場合に便利です。

・input.scss

1. .text-normal {
2. font-family: Helvetica, sans-serif;
3. font-size: 12pt;
4. color: #444;
5. }
6. .text-red {
7. @extend .text-normal;
8. color: #f00;
9. }
10. .text-blue {
11. @extend .text-normal;
12. color: #f00;
13. }

・output.css

1. .text-normal, .text-red, .text-blue {
2. font-family: Helvetica, sans-serif;
3. font-size: 12pt;
4. color: #444;
5. }
6. .text-red {
7. color: #f00;
8. }
9. .text-blue {
10. color: #f00;
11. }

「@mixin」と「@extend」は混同されがちですが、「@mixin」はあらかじめ要素の共通パーツを定義して使いまわしたい場合に使用しましょう。

「@extend」はある要素のスタイルを拡張した要素を作成する際、既存の要素のスタイルを引き継ぎたい場合に使用するのがおすすめです。

開発においてそれぞれの使用を決めるタイミングに違いがあるように感じます。

以上、ここまでSassの中でもよく見られる機能とその記法について紹介しました。

ここに挙げた機能以外にもSassは様々な機能を備えています。

一度Sassの公式サイトのDocumentページで機能一覧に目を通しておくと、Sassの利用の幅が大きく広がるでしょう。

その他Tip集

Sassで開発を進める上で、知っておくと便利なTip集です。

ファイルの監視＆自動コンパイル

通常のコンパイル系プログラミング言語同様、Sassファイルも変更後にコンパイルをしないとCSSファイルには反映されません。

このことは、従来CSSを直接編集して動作確認を行っていたWeb開発者にとっては特に煩わしいことでしょう。

SassにはSassファイルの変更を監視し、変更があったタイミングで自動的にコンパイルを実行する機能が備わっているものがあります。

CUI環境用にsassをインストールした場合、CUI上で以下のコマンドを実行することで、対象Sassファイルの監視が開始されます。

• scss –watch input.scss:output.css

監視を中断する場合は「Ctrl+C」を入力してください。

出力スタイルと変更方法

Sassファイルの変換には、4つの出力スタイルがあります。

コンパイル実行時にオプションを指定することで、出力スタイルを指定可能です。

• sass –style [出力スタイル] input.scss:output.css

指定できる出力スタイルとその出力形式は以下の通りです。

本記事ではここまでexpanded形式で記載しています。開発時または運用時の要件に応じて使い分けるとよいでしょう。

・nested (デフォルト)

1. .text-normal, .text-red, .text-blue {
2. font-family: Helvetica, sans-serif;
3. font-size: 12pt;
4. color: #444;
5. }
6. .text-red {
7. color: #f00;
8. }
9. .text-blue {
10. color: #f00;
11. }

・compact

1. ul, ol { background: #efe; margin: 20px 10px; }
2. ul li, ol li { line-height: 1.5em; padding: 0.5em; list-style: none; }
3. [compressed]
4. ul,ol{background:#efe;margin:20px 10px}ul li,ol li{line-height:1.5em;padding:0.5em;list-style:none}

高機能なフレームワーク

 Sassには、より便利かつ容易にSassを使用できるように各種フレームワークが存在します。

Sassフレームワークの中で有名なのはCompass.appです。

Windows/Mac OS/LinuxのOSでインストール可能なツールで、CUI環境を使用せずメニューバーで操作可能な点が魅力。

また、Mixinの大規模なライブラリが備わっており、便利な定義済みMixinを読み込んで使用することができます。

その他にもSassを使用した様々なフレームワークが存在するので、興味のある方は調べてみてください。

まとめ

Sassという技術を一言で表現するのであれば、「CSS作成にプログラミング要素を付加するもの」ということができるでしょう。

プログラミング経験者にとって「CSSでもこんな風に書けたらいいのに…」と感じていたことが、Sassを利用して実現できるのです。

CSS3によって可能なことが広がり、ますますWeb技術における重要性が増してきたCSS。

Sassを導入してCSSのより良い開発環境を構築することは、これからのWeb開発者にとって大変有意義なことであるといえます。