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

CODE

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

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

Sassを使うと何か便利になるらしいことは知っている。でも、上手く使いこなせていない。

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

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

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

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

本記事の内容
  • 覚えてくべきSassの使い方5選
  • Sassをコンパイルする2つの方法

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

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

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

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

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

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

スポンサーリンク

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

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

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

  • 基本のネスト
  • 変数での管理
  • 演算ができる
  • ミックスイン
  • ファイル分割

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

① 基本のネスト

ネストは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も自動的に変わるので、修正の手間が省けます。

 

④ ミックスイン

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

基本的な使い方

@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設計ベース)とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。

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

scss

  base(ベースのスタイル)
    _base.scss(サイトで共通する必要のあるスタイル)
    _reset.scss(リセットCSS)

  mixin(ミックスイン、1つのファイルに1つの定義)
    _btn.scss
    _font.scss

  page
    about(例)
      block
        _sec.scss(Block単位)
        _message.scss(Block単位)
        style.scss

  pulgins(jQueryのプラグインで付随してくるCSSファイル)
    slick.css(例)

  setting(初期設定で必要なパラメータなど)
    _config.scss(サイトで共通で必要になる設定値、メディアクエリなど)
    _function.scss(functionを定義するSCSSファイル)

  style.scss(インポート用)

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

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

scss

  base
    _base.scss
    _reset.scss

  mixin
    _btn.scss
    _font.scss

  page
    about
      block
        _sec.scss
        _message.scss
        style.scss

  pulgins
    slick.css

  setting
    _config.scss
    _function.scss

  style.scss

 

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

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

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

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

  • Easy Sassを使う
  • gulpタスクの実行

それぞれ解説します。

Easy Sassを使う

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

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

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

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

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

 

gulpタスクの実行

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

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

※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のアウトプットスタイルを表しています。

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

 

  • nested:ネストされているような見た目
  • expanded:可視性が高い
  • compact:セレクタとプロパティがシングルライン
  • compressed:インデントや改行無し

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

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

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

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

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

記述順のソート

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

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

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

 

  • alphabetically:アルファベット順
  • smacss:重要なプロパティ順
  • concentric-css:ボックスモデルの外側から内側の順

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

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

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

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

書き出し場所

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

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

 

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

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

  • 基本のネスト
  • 変数での管理
  • 演算ができる
  • ミックスイン
  • ファイル分割

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

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

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

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

最後に宣伝

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

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

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

HTML / CSS / JSのお悩みを解決します コーディングでお困りの方はお気軽にお問い合わせください! | Webサイト制作に関する相談 | ココナラ
HTML / CSS / JavaScript(jQuery)のお悩み相談、ご質問を受け付けます。「CSSが上手く作れない」「JavaScriptが思ったように...

コメント

タイトルとURLをコピーしました