Chapter01 Sassの基本

概要と目標 Sassが何かを知り、
Sassの基本的な機能を知ろう。

現場でよく利用されているSassとは何かを知り、
Sassの基本的な機能を学習しましょう。

Sassとは CSSを便利に、効率よく書ける
CSSプリプロセッサ。

Sass(サス)はSyntactically Awesome Stylesheetsの略で、構文的にイケてるスタイルシートという意味。
Sassで書いたスタイルをCSSファイルに変換 （コンパイル） して利用する。

Sassの主な機能

  • 記述の簡略化ができる
    親子関係にあるセレクタを入れ子にして記述することができる
  • 変数が使える
    Sassは変数を使って同じ値を使い回せる
  • 演算が使える
    widthやfont-sizeなどの値を計算で求めることができる
  • スタイルを使い回せる
    @extendという機能を使うと一度書いたスタイルを別のセレクタでも使うことができる
  • ファイルを分割して書くことができる
    コンポーネント毎にSassファイルを分けて記述し、1つのCSSファイルとしてまとめることができる
  • CSSファイルを圧縮できる
    SassファイルをCSSにコンパイルする際、圧縮された状態にすることができる

2つの記法 SASS記法と、
SCSS記法がある。

Sassには「SASS記法」と「SCSS記法」の2種類の記法がある。

CSS
#header {
  background-color: #212121;
  color: #fff;
}

#header h1 {
  float: left;
}

SASS記法

記述が非常に簡素化された記法で、拡張子は「.sass」。
CSSとの互換性は無いため。通常のCSSを書くとエラーになる。

SASS記法
#header
  background-color: #212121
  color: #fff
  h1
  float: left

SCSS （Sassy CSS）記法

CSSの記述と似ている記法で、拡張子は「.scss」。
CSSと完全互換があり、現在の主流の記法。

SCSS記法
#header {
  background-color: #212121;
  color: #fff;
  h1 {
    float: left;
  }
}

開発環境 Sassを使える環境を
作る必要がある。

Sassを使うにはSassをインストール必要がある。
ただし、テキストエディタによっては拡張機能を入れるだけで、
環境を作らなくてもSassを利用できるものもある。

Dart Sass

Dart製の「Dart Sass」というライブラリを使ってSassをコンパイルする方法。

  1. Node.js をインストールする
  2. Dart Sassをインストールする

テキストエディタの拡張機能

テキストエディタの拡張機能でSassをコンパイルできるものもある。

Ruby Sass
一昔前は Ruby Sassというものを使ってSassファイルをコンパイルする方法もありました。
が、に廃止予定となりました。
LibSass(node-sass)
C++製のSassファイルをコンパイルする方法もあります。
@importという便利な機能がありますが、に廃止予定となりました。

Sassの環境設定コンパイル時の設定をする。

CSSをコンパイルするときに出力フォーマットや、
コンパイルする場所などを設定する

Visual Studio Codeの「Live Sass Compiler」を使ってCSSをコンパイルする場合は、
「settings.json」で設定できる。

settings.json
{
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css/"
    }
  ],
}
設定値
設定名 設定値
format コンパイル形式
  • "nested" ・・・ Sassの階層をインデントで残す形式
    コンパイル後のCSS
    #header {
  overflow:  hidden; }
  #header h1 {
    float: left; }
    #header h1 a {
      display: block; }
  #header p {
    float: left; }
  • "expanded" ・・・ インデントや改行が入った可読性が高い形式
    コンパイル後のCSS
    #header {
  overflow:  hidden;
}

#header h1 {
  float: left;
}

#header h1 a {
  display: block;
}

#header p {
  float: left;
}
  • "compact" ・・・ セレクタとプロパティが1行になる形式
    コンパイル後のCSS
    #header { overflow:  hidden; }
#header h1 { float: left; }
#header h1 a { display: block; }
#header p { float: left; }
  • "compressed" ・・・ インデントや改行をすべて取り除いた形式
    コンパイル後のCSS
    #header{overflow:hidden;}#header h1{float:left;}#header h1 a{display:block;}#header p{float:left;}
extensionName コンパイル後の拡張子
savePath コンパイル先

ファイルの更新を監視 Sassのファイルが更新されたら、
自動でコンパイルしてくれる。

Sassはコンパイルという作業を行うことで、CSSファイルを書き出す。
毎回自分でコンパイルするのは面倒臭い。
Watch機能を使えば、Sassの更新を察知して自動でコンパイルしてくれる。

SassをWatchしてコンパイルしてみよう。

Visual Studio Codeで、Watch機能を利用するには、「Watch Sass」ボタンを押すだけ。

  1. 「chapter01」 › 「hello」フォルダ内に「_sass」フォルダを作成する
  2. 「chapter01」 › 「hello」フォルダ内に「css」フォルダを作成する
  3. 「chapter01」 › 「hello」 › 「_sass」フォルダ内に「common.scss」ファイルを作成する
  4. 下記のsassのコードをコピペする
chapter01/hello/_sass/common.scss
#header {
  overflow: hidden;

  h1 {
    float: left;

    a {
      display: block;
    }
  }

  p {
    float: left;
  }
}
  1. Visual Studio Code の下部にある「Watch Sass」ボタンを押す
  2. 上書き保存
  3. 「chapter01」 › 「hello」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/hello/css/common.css）
#header {
  overflow: hidden;
}

#header h1 {
  float: left;
}

#header h1 a {
  display: block;
}

#header p {
  float: left;
}
  1. 以降、「common.scss」を更新するたびに、自動でコンパイルされていることを確認する

ルールのネストSassの中でも、
もっともよく使う機能。

子孫セレクタをはじめ、結合子を使った、隣接セレクタや、子セレクタ、
他にも@media をネスト（入れ子）して記述することができる。

基本的なネストを使ってみよう。

下記のようなHTMLに子孫セレクタを使う場合も、Sassなら効率よく記述できる。

HTMLサンプル
<main id="main">
  <section>
    <h2>中身出し</h2>
    <p>これは段落です。</p>
  </section>
  <section>
    <h2>中身出し</h2>
    <p>これは段落です。</p>
  </section>
</main>
作りたいCSS
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;
}

#main section {
  padding: 1.5em 0;
  background-color: #fff;
}

#main h2 {
  font-size: 1.5em;
}

このようなCSSをSassで記述する場合、ルールをネストして書くことができる。

  1. 「chapter01」 › 「nested-rules」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter01/nested-rules/_sass/common.scss
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;

  section {
    padding: 1.5em 0;
    background-color: #fff;
  }

  h2 {
    font-size: 1.5em;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-rules」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-rules/css/common.css）
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;
}

#main section {
  padding: 1.5em 0;
  background-color: #fff;
}

#main h2 {
  font-size: 1.5em;
}

結合子つきのセレクタをネストしてみよう。

ルールのネストは何階層も深くできるし、結合子つきのセレクタだってネストできる。

  1. 「chapter01」 › 「nested-rules」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter01/nested-rules/_sass/common.scss
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;

  section {
    padding: 1.5em 0;
    background-color: #fff;

    + section {
      margin-top: 1.5em;
    }
  }

  h2 {
    font-size: 1.5em;

    + p {
      margin-top: 2em;
    }
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-rules」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-rules/css/common.css）
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;
}

#main section {
  padding: 1.5em 0;
  background-color: #fff;
}

#main section + section {
  margin-top: 1.5em;
}

#main h2 {
  font-size: 1.5em;
}

#main h2 + p {
  margin-top: 2em;
}

メディアクエリをネストしてみよう。

@media だってネストできる。

  1. 「chapter01」 › 「nested-rules」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter01/nested-rules/_sass/common.scss
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;

  section {
    padding: 1.5em 0;
    background-color: #fff;

    + section {
      margin-top: 1.5em;
    }
  }

  h2 {
    font-size: 1.5em;

    + p {
      margin-top: 2em;
    }
  }

  @media screen and (min-width: 768px) {
    padding: 3em 0;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-rules」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-rules/css/common.css）
#main {
  padding: 1.5em 0;
  background-color: #f0f0f0;
}

#main section {
  padding: 1.5em 0;
  background-color: #fff;
}

#main section + section {
  margin-top: 1.5em;
}

#main h2 {
  font-size: 1.5em;
}

#main h2 + p {
  margin-top: 2em;
}

@media screen and (min-width: 768px) {
  #main {
    padding: 3em 0;
  }
}
深すぎるネストに注意
ルールのネストはとても便利ですが、ネストを深くしすぎると、scssファイル内の可読性が低下する場合もあります。
くれぐれもネストのやりすぎには注意しましょう。

親セレクタの参照ルールのネストの中で、
親セレクタを呼び出せる。

擬似クラスや擬似要素のように、ルールをネストする際、親のセレクタ名を参照したい場合は「&」を使うと参照できる。

親セレクタを参照してみよう。

下記のようなCSSを作りたい場合、親のセレクタ名を参照することで効率とメンテンス性を向上できる。

作りたいCSS
a {
  color: #212121;
}

a:hover {
  color: #35b0ab;
}

.media {
  display: block;
  overflow: hidden;
}

.media:hover {
  background-color: #fafafa;
}

このように、親セレクタを参照したいときは以下のようなSassを記述する

  1. 「chapter01」 › 「nested-ampersand」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter01/nested-ampersand/_sass/common.scss
a {
  color: #212121;

  &:hover {
    color: #35b0ab;
  }
}

.media {
  display: block;
  overflow: hidden;

  &:hover {
    background-color: #fafafa;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-ampersand」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-ampersand/css/common.css）
a {
  color: #212121;
}

a:hover {
  color: #35b0ab;
}

.media {
  display: block;
  overflow: hidden;
}

.media:hover {
  background-color: #fafafa;
}

セレクタ名を継承して、
新たなセレクタを作ってみよう。

例えば以下のように、親セレクタの名前を引き継いだ新たなセレクタを作りたいこともある。
そういった時にもこの「&」が使える。

HTMLサンプル
<article>
  <a href="#" class="media">
    <div class="media__body">
      <h3 class="media__title">カードの見出し</h3>
      <p class="media__text">カードの本文</p>
    </div>
    <!-- /.media__body -->
    <div class="media__thumbnail">
      <figure>
        <img src="..." alt="カードのサムネイル">
      </figure>
    </div>
    <!-- /.media__thumbnail -->
  </a>
</article>

このように、親セレクタ名引き継いだ、新たなセレクタを作る場合は以下のようなSassを記述する

  1. 「chapter01」 › 「nested-rules」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを追加する
chapter01/nested-ampersand/_sass/common.scss
a {
  color: #212121;

  &:hover {
    color: #35b0ab;
  }
}

.media {
  display: block;
  overflow: hidden;

  &:hover {
    background-color: #fafafa;
  }

  &__body {
    width: 80%;
    float: right;
  }

  &__thumbnail {
    width: 18%;
    float: left;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-ampersand」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-ampersand/css/common.css）
a {
  color: #212121;
}

a:hover {
  color: #35b0ab;
}

.media {
  display: block;
  overflow: hidden;
}

.media:hover {
  background-color: #fafafa;
}

.media__body {
  width: 80%;
  float: right;
}

.media__thumbnail {
  width: 18%;
  float: left;
}

プロパティのネストプロパティだって、
入れ子にできる。

「-」が付いているプロパティは入れ子構造にして記述することができる。

プロパティのネストを使ってみよう。

作りたいCSS
.heading {
  padding-left: 1em;
  padding-bottom: .5em;
  border-left: 4px solid #212121;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #212121;
  text-align: left;
  text-transform: uppercase;
}

このように、「-」が付いているプロパティは以下のようなSassで記述することができる。

  1. 「chapter01」 › 「nested-properties」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter01/nested-properties/_sass/common.scss
.heading {
  padding: {
    left: 1em;
    bottom: .5em;
  }

  border: {
    left: 4px solid #212121;
    bottom: {
      width: 1px;
      style: solid;
      color: #212121;
    }
  }

  text: {
    align: left;
    transform: uppercase;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「nested-properties」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/nested-properties/css/common.css）
.heading {
  padding-left: 1em;
  padding-bottom: .5em;
  border-left: 4px solid #212121;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #212121;
  text-align: left;
  text-transform: uppercase;
}

コメントコンパイル時に削除されるコメントと、
削除されないコメントがある。

Sassでは、CSSで使える「/*」 ~ 「*/」のコメントはもちろん使える。
それに加えて、Sassファイルのみに残る「// （ スラッシュ2つ）」コメントもある。

コメントを使ってみよう。

  1. 「chapter01」 › 「comment」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
  2. 下記のsassのコードを記述する
chapter01/comment/_sass/common.scss
/* Heading（CSSのコメントでコンパイル後も残る） */
.heading {
  font-weight: bold;

  // メインの見出し （Sassのコメントでコンパイル時に削除される）
  &--primary {
    text-align: center;
    font-size: 2em;
  }
}
  1. 上書き保存
  2. 「chapter01」 › 「comment」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認
コンパイル結果（chapter01/comment/css/common.css）
@charset "UTF-8";
/* Heading（CSSのコメントでコンパイル後も残る） */
.heading {
  font-weight: bold;
}

.heading--primary {
  text-align: center;
  font-size: 2em;
}
「compressed」はCSSコメントも残らない
コンパイルのフォーマットが「compressed」に設定されている場合は、CSSのコメントも削除される。 「compressed」でも残したいCSSのコメントがある場合は、「/*」の直後に「!」を記述します。
chapter01/comment/_sass/common.scss
/*! Heading（CSSのコメントでコンパイル後も残る） */
.heading {
  font-weight: bold;

  // メインの見出し （Sassのコメントでコンパイル時に削除される）
  &--primary {
    text-align: center;
    font-size: 2em;
  }
}

まとめ Sassはとっても便利。

Sassを使うとCSSの記述を効率よく書けたり、
メンテンス性を向上させることができる。

  • VScodeなら環境を作らずSassを始めれる
  • ルールをネストで書くことができる
  • Sassファイルのみ残るコメントがある