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

2022/06/07Sass

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

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか？
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく！

CodeCamp

実行環境

OS	macOS Catalina 10.15.7
Homebrew	3.1.8

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

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

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

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

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

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

brew -v

ワードHomebrew

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

ヒント

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

Sassをインストールする

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

brew install sass/sass/sass

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

sass --version

動作を確認する

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

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

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ファイルをコンパイルする方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！

目次