ホーム>技術

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

目次

おすすめ

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。

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

CodeCamp

実行環境

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

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

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