ミルラク

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

更新日: 2022-06-07

当サイトはアフィリエイト広告を利用しています。

Sassを書籍で学びたい方や初学者の方におすすめな書籍です。
Sassの概要や文法はもちろん、導入方法やフレームワーク、筆者が実際に仕事の現場で使用している実践的なテクニックまで幅広く紹介されています。
実際、初学時にかなりお世話になった書籍です。一緒に勉強しませんか？

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ
¥2,138 （2022/06/04 15:36時点 | Amazon調べ）
Amazonで見る
Kindleで見る

実行環境

OSmacOS Catalina 10.15.7
Homebrew3.1.8

Sassを導入してSCSSファイルからCSSファイルをコンパイルする

今回は、Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法をご紹介します。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする手順は次のとおりです。

  1. Homebrewがインストールされていることを確認する
  2. Sassをインストールする
  3. 動作を確認する

Homebrewがインストールされていることを確認する

はじめに、Homebrewがインストールされていることを確認します。
ターミナルを開いて次のコマンドを実行します。

brew -v
ワードHomebrew

macOS（またはLinux）用パッケージマネージャーのこと。

ヒント

インストールされていない場合は、Homebrewのウェブサイトにある「インストール」に沿ってインストールしてください。
https://brew.sh/index_ja

Sassをインストールする

次に、Sassをインストールします。
ターミナルで次のコマンドを実行します。

brew install sass/sass/sass

インストールが完了したら、Sassのバージョンを確認します。
ターミナルで次のコマンドを実行します。

sass --version

動作を確認する

最後に、動作を確認します。
動作を確認する方法は以下のとおりです。

  1. SCSSファイルを作成する
  2. コンパイルする
  3. 内容を確認する

SCSSファイルを作成する

任意の場所に次のような構成を持つディレクトリとSCSSファイルを作成します。

demo_sass/
　├ sass
　│　└ styles.scss
　└ ...
$opacity-base: 0.8; // opacity-baseに「0.8」を代入

a {
  text-decoration: none;

  &:hover { // 親セレクタ(a)を指定
    opacity: $opacity-base; // opacityにopacity-base(=0.8)を指定
  }
}

コンパイルする

ターミナルで以下のコマンドを実行してSCSSファイルが存在する場所に移動します。

cd /{Directory Path}/demo_sass/sass

sassコマンドを用いてコンパイルします。
以下のコマンドでは「styles.scss」というSCSSファイルをコンパイルし「styles.css」というCSSファイルを作成します。

sass styles.scss:../styles.css
demo_sass/
　├ sass
　│　└ styles.scss
　├ styles.css ← ここにCSSファイルができる
　└ ...

内容を確認する

作成したSCSSファイルと作成されたCSSファイルの内容を確認します。

$opacity-base: 0.8;

a {
  text-decoration: none;

  &:hover {
    opacity: $opacity-base;
  }
}
a {
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}

お疲れさまでした

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法をご紹介しました。
少しでも参考になれば幸いです。