【完全初心者向け】非エンジニアのためのSASS／SCSSの書き方

この記事は以下のようなひとに向けて書いています。

Sassが使えるようになると、コーディングの作業効率がグンとアップするので、頑張って習得していきましょう

【完全初心者向け】非エンジニアのためのSCSS／SASSの書き方

Sass（サス）とは

Sassとは「Syntactically Awesome Stylesheets」の略で、直訳すると「構文的に優れたスタイルシート」という意味になります。

Ruby製のCSSメタ言語と呼ばれるもので、「CSSを効率的に書くための拡張機能」と思ってもらえれば大丈夫です。

Sass（サス）のメリット

Sassのメリットは大きく分けると以下の3つです。

HTMLと同じ入れ子構造でCSSを管理することが出来るので、CSSだと長く複雑になってしまう記述であっても、わかりやすくシンプルに書くことができます。

また、変数を使うことによってシートの修正を最小限の作業で終えることができるので、メンテナンスするときも便利です。

Sassでよく使う変数については「Sass（サス）の書き方＆便利な使い方」で紹介しています。

Sass（サス）のデメリット

環境を準備する必要がある

Sassファイルはそのままではブラウザが認識できないので、CSSに変換してあげる必要があります。

Sassを使う環境を準備するためのツールは「Sass（サス）を使うための準備」で紹介しています。

クライアント側がSassを導入していない場合がある

クライアント側がSassを導入していない場合は、クライアント用に修正用のCSSを用意することによってSassが使えるようになります。

SCSSとSASSの違い

Sassには「SCSS」と「SASS」という2つの書き方があります。

例えば、

.box .item {
  font-size: 10px;
  font-weight: bold;
}

というCSSを書きたい場合は、それぞれ下記のようになります。

■SCSS

.box {
  .item {
    font: {
      size: 10px;
      weight: bold;
    }
  }
}

■SASS

.box
  .item
    font:
      size: 10px
      weight: bold

上記のように、SCSSの記述はCSSによく似ていますが、SASSの記述は括弧やセミコロンがなくCSSと異なるため読みにくいといわれています。

Sass（サス）を使うための準備

①Rubyをインストールする

SassはRuby製のCSSメタ言語なので、まずはRubyをインストールしていきます。

Windowsの場合

「RubyInstaller」で無料でダウンロードすることができます。

詳しいダウンロード方法はこちらのサイトを参考にしてみてください。

Macの場合

MacはもともとRubyがインストールされているので、この作業は必要ありません。

②Sassをインストールする

Windowsの場合

RubyGemsシステムを使って$ gem install sassを実行して、Sassをインストールします。

Macの場合

ターミナルを使って$ gem install sassを実行して、Sassをインストールします。

③コンパイラをインストールする

ブラウザはCSSでないと理解してくれないので、SassをCSSに変換（コンパイル）するコンパイラをインストールしていきます。

ここではSassと同じくRubyで作られている「Compass」をインストールしていきます。

Windowsの場合

RubyGemsシステムを使って$ gem install compassを実行して、Sassをインストールします。

Macの場合

ターミナルを使って$ gem install compassを実行して、Sassをインストールします。

環境を準備しないでSassを体験する方法

環境の準備は面倒だけど、ちょっと試してみたい方におすすめなのが「SassMeister」です。

左側にSCSSを記述すると、右側にコンパイル後のCSSが自動で出力されます。

Sass（サス）の書き方＆便利な使い方

ネスト（入れ子構造）

Sassを使うと、HTMLと同じように入れ子構造でスタイル定義を管理することができるので、コードの記述量を減らすことができます。

セレクタのネスト

セレクタのネストというのは、.container .item .boxのように入れ子になっているセレクタにスタイルを当てる場合に使用します。

SCSSでは、下記のようにセレクタをネストさせて記述することができます。

■SCSS

.container {
  padding: 10px;
 
  .item {
    margin-left: 20px;
 
    .box {
      color: blue;
    }
  }
}

■コンパイル後のCSS

.container {
  padding: 10px;
}
.container .item {
  margin-left: 20px;
}
.container .item .box {
  color: blue;
}

このように、子孫セレクタを指定してスタイルを定義する場合は、親セレクタの括弧の中に子セレクタを設置することによって記述することができます。

プロパティのネスト

font-sizeやfont-weightなど-（ハイフン）で繋がっているプロパティもfont: {としてネストすることができます。

■SCSS

.menu {
  font: {
    size: 1rem; 
    weight: bold;
  }
}

■コンパイル後のCSS

.menu {
  font-size: 1rem;
  font-weight: bold;
}

プロパティをネストでまとめることによって記述量を減らすことができ、fontに関するスタイル定義をまとめることができるので、直感的に分かりやすくメンテナンスもしやすくなります。

親セレクタの参照（&セレクタ）

セレクタをネストするだけの場合は「&」なしで記述しますが、親セレクタを参照する場合は「&」を先頭につけて記述します。

■SCSS

a {
  &:hover {
    color: blue;
  }
}

■コンパイル後のCSS

a:hover {
  color: blue;
}

変数

変数とは、Sassの中で繰り返し使うコードを決まった値で管理するために使用します。

何度も使用するような値は変数として宣言しておくと、作業効率とメンテナンス性が向上します。

変数の使い方

変数は$変数名: 値;のように頭に「$」をつけて変数を宣言し、$変数名で設定値を取り出して使用します。

■SCSS

$baseColor: #fdfcf6;

body {
  background-color: $baseColor; 
}

■コンパイル後のCSS

body {
  background-color: #fdfcf6;
}

$baseColorとして定義したカラーコードがbodyのbackground-colorの値に入っています。

ブレークポイント（メディアクエリ）

ブレークポイントを変数として宣言しておくと、レスポンシブレイアウトを変えるときに、数値を覚える必要がなくなるのでミスを防ぐことができます。

■SCSS

$media-sp: 600px;
$media-pc: 960px;
 
@media screen and (min-width:$media-pc){
    .title{
        font-size: 1.2em;
    }   
}
@media screen and (max-width:$media-sp){
    .title{
        font-size: 1em;
    }   
}

カラムの幅

カラムの幅もレイアウト上ではよく使うので変数にしておくと便利です。

■SCSS

$col2: 50%;
$col3: 33.333%;
$col4: 25%;
$col5: 20;
$col6: 16.666%;
 
.list__item{
    width: $col3;
}

カラーコード

統一感のためにあらかじめカラーが定義されている場合は、それを変数として宣言しておきましょう。

■SCSS

$baseColor: #fdfcf6;
$keyColor: #14c0c9;

body {
  background-color: $baseColor; 
}

.button {
  background-color: $keyColor;
}

フォントファミリー

サイト内で複数のフォントファミリーを使用している場合は、変数によって管理すると便利です。

■SCSS

$font-family : "Noto Sans JP", sans-serif;
 
.box {
	font-family: $font-family;
}

文字列の変数

文字列を値として扱うこともできます。

文字列の場合には、$変数名: "文字列";で囲み、#{$変数名}で値を取り出します。

■SCSS

$large: "(min-width:1025px)";
$middle: "(min-width:769px) and (max-width:1024px)";
$small: "(min-width:768px)";

@media #{$large} {
  p {
    font-size: 1.2rem;
  }
}

@mixin（ミックスイン）

@mixinを使うと、コードの塊（雛形）を作って何度もくりかえし使うことができるようになります。

修正が必要な場合は、雛形を変更すれば全てのスタイルが同じく変更されるので、変更箇所が少なくメンテナンスしやすくなります。

@mixinは、@includeで呼び出します。

■SCSS

@mixin button($color: red) {
  width: 100px;
  height: 40px;
  background-color: $color;
}

.button1 {
  @include button;
}
.button2 {
  @include button(blue);
}

■コンパイル後のCSS

.button1 {
  width: 100px;
  height: 40px;
  background-color: red;
}

.button2 {
  width: 100px;
  height: 40px;
  background-color: blue;
}

上記は、@mixin button($color: red) {...}でMixinを作成し、@include button;で呼び出しています。

button2では、@include button(blue)としているので、この場合は$colorの変数によってcolor: blue;となります。

@extend（継承）

@extendは@mixinと似ているのですが、呼び出すときに変数を使うことはできません。

@extendは雛形ではなく、実際に使用されているスタイルをコピーするだけの機能です。

■SCSS

.button1 {
  width: 100px;
  height: 40px;
  background-color: red;
}

.button2 {
  @extend .button1;
  font-size: 1.2rem;
}

■コンパイル後のCSS

.button1, .button2 {
  width: 100px;
  height: 40px;
  background-color: red;
}

.button2 {
  font-size: 1.2rem;
}

関数（ネイティブ関数）

Sassには、あらかじめ用意されている関数（ネイティブ関数）がいくつかあり、それらは定義することなくそのまま使うことができます。

色の関数

よく使うもので、色の明るさを調整できる関数(darken,lighten)があります。

それぞれdarkenは色を暗く、lightenは色を明るくします。

ボタンをマウスオーバーしたときに少し明度を暗くしたり、ここを10%明るくしてほしいといった修正が入った場合に便利です。

■SCSS

$keyColor: #14c0c9;

.button {
  background-color: $keyColor;
  &:hover {
    background-color: darken($keyColor, 10%);
  }
}

■コンパイル後のCSS

.button {
  background-color: #14c0c9;
}
.button:hover {
  background-color: #0f949b;
}

上記は、ボタンをマウスオーバーしたときに少し暗いカラーコードに変換されるようになっています。

スタイルシートの分割（パーシャル）

Sassを使えば、スタイルシートを役割ごとにうまく分割することができるので管理がしやすくなります。

CSSでもスタイルシートを分割することはできるのですが、CSSファイルを分割すると読み込みに少し時間がかかってしまうので、Sassファイルを分割するのがおすすめです。

分割したSassファイルの呼び出し方

分割したSassファイルのことをパーシャルと呼びます。

パーシャルのファイル名は「_filename.scss」となり、呼び出し側では@import 'filename';と記述すれば、「_filename.scss」が読み込まれます。

■パーシャル「_partial.scss」

$baseColor: #fdfcf6;
$subColor: #bea300;
$keyColor: #14c0c9;
$fontColor: #4c4c4c;

■SCSS

@import 'partial';

.button {
    background-color: $keyColor;
}

■コンパイル後のCSS

.button {
    background-color: #14c0c9;
}

Sass（サス）を使うときの注意点

ネストを深くしすぎない

ネストがあまりに深くなってしまうと生成されるCSSのコードが複雑になってしまいます。

慣れないうちは、あまり深くネストしすぎないように気をつけて書くようにしましょう。

コメントは「/* */」を使う

Sassでは//の1行コメントはコンパイル時にすべて削除されてしまいます。

コメントを残したい場合は複数行コメント/* */を使いましょう。

【完全初心者向け】非エンジニアのためのSCSS／SASSの書き方｜まとめ

本記事では、完全初心者向けに「Sassの導入方法〜SCSS／SASSの書き方と便利な使い方」まで非エンジニアの方でもわかるように説明してきました。

Sassはコードの記述が少なく作業的な負担の削減と管理上の利便性も高いので、導入することによって多くのメリットを生むことができます。

Sassで初心者がつまずきやすいところをピックアップしたので、わからなくなったときに参考にしてもらえると幸いです。