【覚えるべき技５選】Web制作者のためのSassの教科書【備忘録】

この記事では「Web制作者のためのSassの教科書 改訂2版」を参考に、Sassの初心者でもすぐに使えるテクニックを紹介しています。

想定読者は、Sassの知識がちょっとある方。

このような方に、まず覚えておくべき使い方を、自分の備忘録も兼ねて書きました。

色々な使い方があるので、全部覚えて使いこなすのは、正直難しいです。
しかし、使えば確実に効率化し、初心者でもすぐに使えると思ったところだけ紹介します。

Sass初心者の方の参考になれば嬉しいです。

この本は辞書的に使えるので、Sassをマスターしたい方は持っていて損はありません。

この記事を書いている私（わや@wayasblog）は、Web制作の勉強を開始して１年ほどです。
そして、今回は「Web制作者のためのSassの教科書 改訂2版」を読み、Sassを勉強しました。

私の「Web制作者のためのSassの教科書 改訂2版」で勉強前のSassの知識は、「何となく知っているけど、実際にコーディングには使えない」というレベルでした。

しかし、これからはSassを使おうと決意することができた本です。
Sassを使いこなせることができれば、コーディングがかなり効率的になると思いました。

「Web制作者のためのSassの教科書 改訂2版」の公式サポートサイトは以下です。

Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト

インプレスより出版されている書籍「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ（平澤 隆＆森田 壮）」の公式サポートサイトです。

book2.scss.jp

本と一緒に活用できるようになっており、サンプルコードもコピペできます。

スポンサーリンク

【覚えるべき技５選】Web制作者のためのSassの教科書

Sass初心者が覚えておくべき、便利な使い方を５つ紹介します。

順番に見ていきましょう。

① 基本のネスト

ネストはSassの醍醐味とも言える機能ですね。
CSSをHTMLの構造に合わせて入れ子で書くことができます。

<div id="main">
    <section>
        <h1>見出し</h1>
        <p>段落</p>
        <p class="notes">注意書き</p>
        <ul>
            <li>リスト</li>
        </ul>
    </section>
    <section>
        <h1>見出し</h1>
        <p>段落</p>
    </section>
</div><!-- / #main -->

このようなHTMLがあった時に、CSSは以下のように書くと思います。

#main section {
  margin-bottom: 50px;
}
#main section h1 {
  font-size: 140%;
}
#main section ul, #main section p {
  margin-bottom: 1.5em;
}
#main section p.notes {
  color: red;
}

ですが、Sassで書くと以下のように入れ子で書くことができます。

#main {
    section {
        margin-bottom: 50px;
        h1 {
            font-size: 140%;
        }
        p, ul {
            margin-bottom: 1.5em;
        }
        p.notes {
            color: red;
        }
    }
}

さらに、以下のようなコードの場合、

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

「＆」で親セレクタの参照をすることができます。

a {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

ここで「&」を忘れてしまうと上手くコンパイルされませんので、注意してください。
私はこのミスで悩まされました…

 

② 変数での管理

あらかじめ変数を決めておくことで、他の場所でも呼び出すことができる便利な使い方です。
たとえば、色や文字サイズを管理するのに便利ですね。

$red: #cf2d3a;
 
.notes {
    color: $red;
}
.notesBox {
    border: 3px double $red;
}

.notes {
   color: #cf2d3a;
}
.notesBox {
   border: 3px double #cf2d3a;
}

 

③ 演算ができる

「widthからpaddingを引く」などの計算もSassが計算してくれます。

$main_width: 560px;
 
article {
    $padding: 7px;
    width: $main_width - $padding * 2;
    padding: 0 $padding;
}

article {
  width: 546px;
  padding: 0 7px;
}

上記のように、変数とも合わせて使うことができるので便利です。
paddingが変わっても、widthも自動的に変わるので、修正の手間が省けます。

 

④ ミックスイン

ミックスインとは、スタイルの集まりを定義し、使い回しができる機能です。
たとえば、ボタンのスタイルなどは１つのサイトで大体同じだと思うので、便利ですね。

基本的な使い方

@mixin boxSet {
    padding: 15px;
    background: #999;
    color: #FFF;
}
.relatedArea {
    //@includeで呼び出す
    @include boxSet;
}

.relatedArea {
  padding: 15px;
  background: #999;
  color: #FFF;
}

応用：引数を使う

@mixin boxSet($value) {
    padding: $value;
    background: #999;
    color: #FFF;
}
.relatedArea {
    //@includeで呼び出す
    @include boxSet(20px);
}

.relatedArea {
  padding: 20px;
  background: #999;
  color: #FFF;
}

メディアクエリ

// まずは変数で指定
$breakpoints: (
    sp: "screen and (max-width: 767px)",
    tab: "screen and (max-width: 1023px)",
    pc: "screen and (min-width: 1024px)",
);
// mixinで出力方法を設定
@mixin media($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

.item {
    @include media(sp) {
        background-color: blue;
    }
    @include media(tab) {
        background-color: green;
    }
    @include media(pc) {
        background-color: red;
    }
}

@media screen and (max-width: 767px) {
  .item {
    background-color: blue;
  }
}

@media screen and (max-width: 1023px) {
  .item {
    background-color: green;
  }
}

@media screen and (min-width: 1024px) {
  .item {
    background-color: red;
  }
}

いちいち書くのが面倒なメディアクエリを省略できますね。

 

⑤ ファイル分割

Sassファイルを役割に応じて分割して管理する方法です。

Sassのファイル設計に関して参考になるのが「吉本式」です。

SCSSのファイル設計について Vol.1　吉本式BEM設計（BEM設計ベース）

吉本式BEM設計（BEM設計ベース）とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。

tsudoi.org

「吉本式」を参考にしたディレクトリ構造は、以下の通りです。

修正したい箇所がどこに書かれているかがすぐにわかりやすいですよね。

※スマホだと見にくいので、説明を省いたのも貼っておきます。

 

【Sassの教科書から学ぶ】Sassをコンパイルする方法

Sassは、そのままHTMLから読み込むことができないので、CSSに変換する必要があります。
CSSに変換することを「コンパイル」といいます。

コンパイルする方法はいくつかありますが、その中の２つを紹介します。

それぞれ解説します。

Easy Sassを使う

まずは、初心者向けの方法です。

「VSCode」を使っている方は、拡張機能「Easy Sass」を導入すれば簡単にコンパイルできます。

Easy Sass - Visual Studio Marketplace

Extension for Visual Studio Code - Built-in, easy to use Sass compiler

marketplace.visualstudio.com

Sassファイルを保存すれば、自動的にCSSファイルが出力されるので簡単です。

ただ、色々な細かい設定ができないので、本格的に使うなら次の「gulp」が断然オススメです。

 

gulpタスクの実行

ここからは、完全初心者には難しいかもしれません。

私も「Web制作者のためのSassの教科書 改訂2版」で勉強中に、かなり手間取りました。
黒い画面（ターミナルやコマンドプロンプト）に慣れていなかったからです。

今日から「Sassの教科書」やってます👩‍💻
まだ環境構築段階ですが、つまずいたところのメモ

✅Node.jsのインストール時にMac側の制限でできない
→「control」を押しながら開くとOK

✅gulp-cliのインストールでエラー
→Qiitaに解決策あり
参考：https://t.co/XKbma0vCVqhttps://t.co/EeFzeGIs4S pic.twitter.com/FpOrbH9qln

— わや@ブログ/プログラミング挑戦中 (@wayasblog) November 12, 2019

「Sassの教科書」備忘録📝

Node.js12とgulp3の組み合わせは機能しない
→Nose.jsのバージョンをダウングレード

さらにエラーが出たので、下記のQiitaで解決💡

✅gulpコマンドで Error: The `libsass` binding was not found と表示された時の解決方法。https://t.co/neD2m9MOcp

コンパイル成功🙌

— わや@ブログ/プログラミング挑戦中 (@wayasblog) November 15, 2019

※gulpとNode.jsのバージョンの相性があるみたいなので、注意してください。

しかし、先ほども書いた通り、細かい設定ができるので、便利です。

インストール方法などは、割愛します。
「Web制作者のためのSassの教科書 改訂2版」にも丁寧に書かれていますし、ネット上にも詳しい説明がありますね。

 

「gulpfile.js」の書き方

SassからCSSファイルを出力する時に「gulpfile.js」が必要になります。
デフォルトのファイルに、gulpのタスクを追加すると、よりきれいなCSSが出来上がります。

その時に、以下のテンプレートを使うといい感じにコンパイルされます。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssdeclsort = require('css-declaration-sorter');
var mqpacker = require('css-mqpacker');

gulp.task('sass', function() {
  return gulp.src('./sass/**/*.scss')
    .pipe(plumber({errorHandler: notify.onError("Error:<%= error.message %>")}))
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(postcss([mqpacker()]))
    .pipe(postcss([cssdeclsort({order: 'alphabetically'})]))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('./css'));
})

簡単に見ていきましょう。

ファイルの指定

return gulp.src('./sass/**/*.scss')

上記で、sassファイル内のすべてのscssファイルをコンパイルすることを意味します。

エラー時の設定

.pipe(plumber({errorHandler: notify.onError("Error:<%= error.message %>")}))

Sassの記述ミスなどでコンパイルエラーになってしまうと、タスクが止まってしまいます。

いちいち入力し直すのは手間なので、停止させないようにする設定です。
さらに、エラー時に通知を出すような設定になっています。

フォルダの指定

.pipe(sassGlob())

ファイルを細分化していても、全ファイルがインポートされる設定です。

@import "components/**";

上記のようにフォルダごと書けばOKです。

アウトプットスタイル

.pipe(sass({outputStyle: 'expanded'}))

これは、Sassのアウトプットスタイルを表しています。

アウトプットスタイルは、以下の４種類あります。

基本的には「expanded」でOKです。

メディアクエリをまとめる

.pipe(postcss([mqpacker()]))

バラバラになったメディアクエリをまとめてコード量を削減してスッキリしてくれます。

Sassはメディアクエリをネストして書くことができます。
しかし、コンパイルされるとメディアクエリがバラバラになってしまいます。それを、まとめて記述してくれるのです。

記述順のソート

.pipe(postcss([cssdeclsort({order: 'alphabetically'})]))

CSSプロパティの記述順を自動でソートしてくれます。

以下の３種類＋オリジナルのソート順をカスタムすることも可能です。

決まりはないようですが、多く採用されているのは「alphabetically」のようです。

ベンダープレフィックス自動付与

.pipe(postcss([autoprefixer()]))

ベンダープレフィックス（「–webkit-」や「–moz-」など）を自動付与してくれる設定です。

書き出し場所

.pipe(gulp.dest('./css'));

「gulpfile.js」から相対パスで見るので、同じ階層の「css」フォルダに書き出すという設定です。

 

【覚えるべき技５選】Web制作者のためのSassの教科書【まとめ】

Sassの覚えておくべき使い方は、以下の５つでした。

以上が使いこなせたら、コーディング速度UP間違いなしですね。

Sassを勉強して感じたことは、コーディングは何よりも準備が大切ということです。
特に、変数で管理したり、ファイル分割するには、サイト全体を把握する必要があります。

準備せずにいきなりコーディングに取り掛かっていた過去の自分が、いかに非効率だったかがわかりました。
「急がば回れ」ですね。

Sass初心者の方の参考になっていたら、嬉しいです。
以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

• CSSが上手く作れない
• JavaScriptが思ったように動かない
• ブログのデザインを修正したい
• 勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

ココナラ

...

coconala.com