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

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。
当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!
OS | macOS Catalina 10.15.7 |
Homebrew | 3.1.8 |
今回は、Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法をご紹介します。
Sassを導入してSCSSファイルからCSSファイルをコンパイルする手順は次のとおりです。
はじめに、Homebrewがインストールされていることを確認します。
ターミナルを開いて次のコマンドを実行します。
brew -v
macOS(またはLinux)用パッケージマネージャーのこと。
インストールされていない場合は、Homebrewのウェブサイトにある「インストール」に沿ってインストールしてください。
https://brew.sh/index_ja
次に、Sassをインストールします。
ターミナルで次のコマンドを実行します。
brew install sass/sass/sass
インストールが完了したら、Sassのバージョンを確認します。
ターミナルで次のコマンドを実行します。
sass --version
最後に、動作を確認します。
動作を確認する方法は以下のとおりです。
任意の場所に次のような構成を持つディレクトリと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ファイルをコンパイルする方法をご紹介しました。
少しでも参考になれば幸いです。
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!