こんにちは。

大阪の京町堀にあるWeb制作会社、Double Factory（ダブルファクトリー ）の今井です。

本日は天才プログラマー濱さんにお越しいただき、社内勉強会を行いました。

お題は「Sassを使ってみよう！」です。

今回はnode.jsを用いてSassを導入しました。

Sassとは

Sassとは、「Syntactically Awesome StyleSheet」の略で、直訳すると「構文的に素晴らしいスタイルシート」。

その名の通り、CSSを拡張し、効率的に記述ができるように開発されたCSSのメタ言語です。

Sassのメリット

• 変数が使える
• ネスト（入れ子構造）が使える
• if文やfor文などの条件分岐が使える
• 管理がしやすい 
• 記述量が減る
• 複数人でファイルを触りやすい

他にもさまざまなことがSassでは可能になります。

参考サイト：Qiita:SCSSでできることまとめ

導入手順

まずはSassの導入手順をご紹介します。

今回はnode.jsを用いて導入します。

1. node.jsをインストール
2. yarnをインストール
3. テストフォルダを作成
4. ターミナルで初期化
5. Sassのインストール
6. Sassコンパイル
7. watchオプションでコンパイルを自動化

1.node.jsをインストール

homebrewをインストール

まずはnode.jsをインストールして、開発環境を構築します。

node.jsをインストールするには Homebrew をインストールします。

HomebrewはmacOS用のパッケージマネージャーです。

Homebrewのインストール方法は公式サイトに詳しく紹介されていますのでご参考ください。

Homebrew公式サイト

コマンドを入力します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

このコマンドを入力すると、Homebrewのインストールが始まります。

パスワードを求められる場合は入力してください。

ログに

**Warning**: /opt/homebrew/bin is not in your PATH. Instructions on how to configure your shell for Homebrew can be found in the 'Next steps' section below.

といった警告が出る場合はPATHを通す必要があります。

解決方法はログにも記載されている、Next stepsのコマンドを2つ入力します。

echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/[user_name]/.zprofile

eval $(/opt/homebrew/bin/brew shellenv)

[user_name]の部分はユーザー名に置き換えてください。

ターミナルを再起動してバージョンが確認できたらインストール完了です。

brew -v

node.jsをインストール

インストールしたHomebrewを使用して、node.jsをインストールします。

コマンド　

$ brew install node

このコマンドを入力すると、node.jsのインストールが始まります。

ターミナルを再起動してバージョンが確認できたらインストール完了です。

コマンド　

node -v

2.yarnをインストール

コマンド　

sudo npm i -g yarn

yarnをインストールします。

yarnとはnode.jsのパッケージマネージャです。

パッケージマネージャはディレクトリ単位のローカルインストールではなく端末単位のグローバルインストールを行います。

node.jsにはnpmという代表的なパッケージマネージャがありますが、

• npmよりインストールが速い
• npmより厳密にモジュールのバージョンを固定できる
• npmと互換性がある

このような点からnpmよりもyarnを選ぶ方も多いようです。

3.フォルダを作成

プロジェクトフォルダを作成します。

4.ターミナルで初期化

作成したプロジェクトフォルダを初期化します。

コマンド　

yarn init

これはpackage.jsonやnpm modulesをインストールするための初期化です。package.jsonがあれば、そのプロジェクトフォルダ内でnode.jsを使用することができます。

逆にpackage.jsonがなければとyarnやnpmといったパッケージマネージャを使用することができません。

5.Sassのインストール

Sassをインストールします。

コマンド　

yarn add sass

6.Sassのコンパイル

Sassを使用するにはコンパイルしてcss化する必要があります。

コマンド

yarn sass [input_path]test.scss [output_path]test.css [input_path]

[output_path]にはそのファイルまでの階層が入ります。

7.watchオプションでコンパイルを自動化

プログラムは、通常一度実行したら終了してしまいます。

Sassファイルを更新した場合、毎回コンパイルプログラムを行う必要があるのですが、 watchオプションを用いれば、自動でコンパイルを行うことができ作業効率が大幅にアップします。

コマンド

yarn sass --watch [input_path]test.scss [output_path]test.css

[input_path]、[output_path]にはそのファイルまでの階層が入ります。

watchオプションを用いた便利な機能

管理が面倒な複数のファイルをSassなら一つにすることができます。

watch対象のSassに

@import "/ファイル名（拡張子は不要）"

を記入すると、 コンパイルされたcssに複数のSassファイルが出力されます。（ディレクトリごとにimportすることも可能です。）

import用のSassを1つ作っておくと便利です。

これでSassを使ってWebサイト構築をスムーズに行うことができます。

まとめ

大きなWebサイトや、複数人で管理するWebサイトの場合、ファイルが多くなりがちで管理が面倒ですよね。

こうした便利機能を使うことで、作業を効率化することができます。

弊社では毎月社内勉強会を開催しており、こうした最新技術を積極的に取り入れることに力を入れています。

WEBのお悩みであればダブルファクトリーにお任せください。

ご相談・お問い合わせはこちらから

※この記事は2023/5/11時点の情報です。