効率的なスタイルシート作成の鍵！Sass入門【WEB制作環境構築】

WEB制作の実務では、下層ページが大量にあったり、複雑なデザインだったりすると、コードの記述量はかなり増えます。

できる事ならコードの記述量を減らしたり、後々の保守性を高くしたりしたいものです。

JavaScriptを使いやすくするために、jQueryを使うのと同様に、私はHTMLにはpug、CSSにはSassというものを利用しています。

この記事からは、実践的なWEB制作環境の構築をやっていきます！

今回の記事では、Sassについて紹介します。

Sassってなんだ？
Sassの使用準備
SCSS構文について
まとめ

Sassってなんだ？

Sassとは Syntactically Awesome Style Sheets の略で直訳すると 構文的に素晴らしいスタイルシート ということになります。

要はCSSをもっと素晴らしい使いやすい構文で書けるものですよ～というものです。

但し、一口にSassと言っても書き方が2種類あります。

Sassが開発された当初のSass構文と、後発のSCSS構文とがあり、それぞれのファイルの拡張子は.sass、.scssになります。

Sass構文は次のようなイメージになります。

div
  width: 100px
  p
    font-size: 10px

中括弧{}の代わりにインデントを用いて、セミコロン;が無いのが特徴です。

SCSS構文は次のようなイメージです。

div {
  width: 100px;
  p{
    font-size: 10px;
  }
}

となり、こちらの方が生のCSSでの書き方と似たもので、現在一般的なものになります。CSSで有効な構文はSCSS構文でも有効です。

この記事では、SCSS記法についてのみ取り上げます。

Sassの使用準備

ではさっそくSCSS記法でスタイルを記述してHTMLファイルから読込...したいところですができません！

HTMLファイルが<link>で読み込むことができるのは.cssファイルであり、.scssファイルは、.cssファイルに変換しなければなりません。

このファイルの変換をする為にSassライブラリが必要になります。

そして、そのSassライブラリをインストールするためにはnpmを用いる必要があります。

※npmとは Node Package Manager の略称で、WEB制作に必要なパッケージ等をインストールすることの出来るものです。

この他にもモバイルアプリ開発でも必要なパッケージをインストールしたりできるので、使えるようになって損はないでしょう。

Node.jsをインストールしてnpmを使えるようにする

npmを使うためには、Node.jsなるものをインストールすれば一緒にnpmがついてきます。

まずは、Node.jsの公式サイトにアクセスします。

このページでは使っている環境に応じたものが表示されていると思います(私の場合はWindowsです)。左の推奨版をダウンロードしましょう。

ダウンロードしたインストーラを実行すると、インストールが開始されます。

インストール中、Node.jsの使用許諾契約書に同意するかにチェックを入れる以外は、デフォルトのまま「Next」をクリックしていくだけでOKです。

Node.jsのインストールが完了したら、コマンドプロンプト(macの方はターミナル)を立ち上げてください。

※VSCodeを使っている場合はVSCode上でメニューバーからTerminal→New TerminalとするとVSCode内でコマンドを入力できるようになるのでオススメです。

次のコマンドを入力します。

> npm -v

X.XX.XX等のnpmのバージョンが表示されればOKです。

これでひとまずnpmを使う準備が完了です！

Sassをインストール

さっそくnpmコマンドを使ってSassをインストールしましょう。

以下のようなファイル構成で作業を進めます。

sample/
  ├ public/
  │  ├ index.html
  │  └ css/
  └ src/
     └ sass/

src/sassフォルダには.scssファイルを、public/cssフォルダには.cssファイルを入れていきます。

なお、publicフォルダは中身をそのままアップロードすることで、WEBに公開できるものとします。

とりあえず、index.htmlをエディタで開き、同じフォルダ内のcss/style.cssを読み込むように<link>をしておいてください。

<link>要素の書き方はこちらをご覧ください。

【HTML入門】head要素の書き方とその意味合いについて | KATSU LOG

ちょっと難しい？内に入れるメタタグ等について紹介します

https://katsu-dev.netlify.app/blog/web/html-head/#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E8%AA%AD%E8%BE%BC

【HTML入門】head要素の書き方とその意味合いについて | KATSU LOG-image

まずはコマンドプロンプトorターミナルを立ち上げ、作業ディレクトリに移動します(パスは適宜変更してください)

> cd sample

ディレクトリを移動したら、次のコマンドを入力します。

> npm init -y

これでsampleフォルダ内にpackage.jsonが作成されます。

sample/
  ├ public/
  │  ├ index.html
  │  └ css/
  ├ src/
  │  └ sass/
  └ package.json

※package.jsonにはこの先各種パッケージをインストールしたときにその情報が書き込まれるなどします。

ここでようやくSassをインストールします。

> npm install -g sass

インストールが完了したら、次のコマンドを入力してみてください。

> sass --version

1.64.1 compiled with dart2js 3.0.6等が表示されていればSassのインストールは完了です！

ちなみに…npm install時に-gオプションが付いていますが、これはグローバルインストールといい、PC上のどのディレクトリからでもパッケージが使えるようになるものです。

つまり、今インストールしたsassコマンドは、どこのディレクトリからでも実行することが可能です。

―gオプションを付けない場合はローカルインストールとなり、作業ディレクトリでのみパッケージが使えるようになります。ローカルインストールの場合は--save-dev,-Dや--save,-Sなどを付けます。

ローカルインストールの場合は、該当ディレクトリのnode_modulesにパッケージがインストールされ、同ディレクトリから、npx パッケージ名で実行することができます。

Sassの実行

いよいよSassを使ってみましょう。これもコマンドで、sassを走らせます。

> sass --watch src/sass:public/css

以下のようなメッセージが表示されれば、sassが動いている状態になり、ctrl+cで終了します。.scssから.cssファイルへの変換が行われると、Compiledが表示されます。

Sass is watching for changes. Press Ctrl-C to stop.

[2023-07-29 16:38] Compiled src\sass\style.scss to public\css\style.css.
[2023-07-29 16:40] Compiled src\sass\style.scss to public\css\style.css.

sassコマンドの後に追加しているオプションは--watchがファイルの変更の監視、src/sass:public/cssのsrc/sassが変更を監視するフォルダ、public/cssが変換後のファイルを出力するフォルダになります。

なお入力となるsrc/sassフォルダ内でさらに下層フォルダがある場合、そのままの構成で出力先のフォルダへコピーされます。

とりあえず適当な.scssファイルを作成してみましょう。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  ├ src/
  │  └ sass/
  │     └ style.scss  └ package.json

style.scssファイルを作成した時点で、出力先となるpublic/cssフォルダへstyle.cssファイルが出力されると思います。

sample/
  ├ node_modules/
  ├ public/
  │  ├ index.html
  │  └ css/
  │     └ style.css  ├ src/
  │  └ sass/
  │     └ style.scss
  └ package.json

この後、style.scssや、src/sassフォルダ内の.scssファイルを編集して保存する度にこの変換が行われます。

これで、Sassでスタイルを手軽に書けるようになりました！！

SCSS構文について

環境構築お疲れ様でした！

ここからはSCSS構文について紹介していきます。

セレクタのネスト

下のように親子関係にある要素はネストすることができます。Sassの構文中で一番特徴的なものかと思います。

.parent {
  プロパティ: 値;
  .child {
    プロパティ: 値;
  }
}

これは次の様なCSSに変換されます。

.parent {
  プロパティ: 値;
}

.parent .child {
  プロパティ: 値;
}

また、子セレクタ名に&を含めると、親セレクタの名前を使用する事ができます。

次回以降の記事で紹介しますが、この構文とBEMという設計手法は相性がいいのでオススメです。

.block {
  プロパティ: 値;
  &:hover {
    プロパティ: 値;
  }
  &-element {
    プロパティ: 値;
  } 
}

これは次の様なCSSに変換されます。

.block {
  プロパティ: 値;
}
.block:hover {
  プロパティ: 値;
}
.block-element {
  プロパティ: 値;
}

変数を使用する

今はCSSでも変数を使うことができますが、Sassでの変数の方がやや使い勝手がいいかもしれません。

$変数名: 値; のような形で、変数を定義する事ができ、任意のプロパティの値に$変数名;とすると、変数の値が展開されます。

変数の値にはCSSで使用可能な値を指定することができます。

$theme-color: #bf4080;

p {
  color: $theme-color;
}

これは次のように変換されます。

p {
  color: #bf4080;
}

ファイルを自動変換対象から外す

sassコマンドでフォルダを指定して自動変換をする際、ファイル名の頭に_(アンダースコア)をつけると、そのファイルを自動変換対象から外すことができます。

この機能を使って、ファイルを分割する際に、分割したファイルの名前の頭文字に_を付け自動変換対象外として、他ファイルでインポートして使用することができます。

他のCSSファイルをインポートする

@use構文を使って、他のファイルをインポートすることができます。

※Dart Sassのみで使える機能です。古いバージョンでは使用できないので代わりに@importを使用します。

まずはインポートされる側のファイルを作成します。

インポートして参照するので、ファイル名の頭文字に_アンダースコアを付け、自動変換の対象外とします。

ここでは_base.scssとします。

/* _base.scss */
$theme-color: #bf4080;

body {
  background-color: #eee;
}
h2 {
  font-size: 24px;
  color: $theme-color;
}
p {
  font-size: 16px;
}

次にstyle.scssで、_base.scssをインポートします。

/* style.scss */
@use "base";
.card {
  background-color: base.$theme-color;
}

これらは次のように変換されます。

/* style.css */
body {
  background-color: #eee;
}
h2 {
  font-size: 24px;
  color: #bf4080;
}
p {
  font-size: 16px;
}
.card {
  background-color: #bf4080;
}

mixin

@mixinでスタイルのテンプレートを定義し、@includeで使い回すことが出来ます。

また、@mixinに引数を渡すことで、動的なスタイルとすることが出来ます。

@mixinの構文は次のようになります。

@mixin hoge($fuga: 初期値){
  プロパティ: 値;
}

($fuga: 初期値)の変数$fugaは中括弧内のプロパティに対して使用することができる変数です。

@includeするときに引数の指定がなければ初期値を、引数の指定があればその値を使うようになります。

@includeの構文は次になります。

div {
  @include hoge($fuga: 10px);
}

@mixinで定義したものを引数を指定して呼び出します。

引数を指定せず初期値を使う場合は@include hoge;のみでOKです。

下の例にでは、button-themeがテンプレートとして定義され、button、confirmクラスで引数無し、引数有りで呼び出されています。

@mixin button-theme($theme: darkgrey) {
  background: $theme;
  color: #fff;
}

.button {
  @include button-theme;
}
.confirm {
  @include button-theme($theme: lightgreen);
}

これは次のように変換されます。

.button {
  background: darkgrey;
  color: #fff;
}
.confirm {
  background: lightgreen;
  color: #fff;
}

継承

%セレクタでスタイルのテンプレートを定義し、@extendでテンプレートを呼び出します。

mixinと似てますが、動的なことは出来ません。単純にスタイルを再利用するだけならこちらの方が合っているでしょう。

下の例では%button-baseがテンプレートとして定義され、button、confirm、errorクラスで呼び出されています。

%button-base{
  background: darkgrey;
  color: #fff;
}

.button {
  @extend %button-base;
}
.confirm {
  @extend %button-base;
  background: darkgrey;
}
.error {
  @extend %button-base;
  background: red;
}

これは次のように変換されます。

.error, .confirm, .button {
  background: darkgrey;
  color: #fff;
}

.confirm {
  background: darkgrey;
}

.error {
  background: red;
}

まとめ

生のHTML,CSSを書いていた方は、Node.jsやnpm等、聞き慣れないものが多いかもしれません。

ですが、使いこなせば開発はぐっと楽になるので頑張りましょう！！

次の記事
HTMLを効率的にコーディングできるPugについて紹介します！

PugでHTMLを効率的にコーディングしよう！【WEB制作環境構築】 | KATSU LOG

HTMLの効率的なコーディングができるテンプレートエンジン、Pugを紹介します。

https://katsu-dev.netlify.app/blog/web/env/pug/