プロジェクトにSASSを追加する方法って？ 🤔

コースロードマップを追加しました。

]

前回の投稿では、SASSが何か、またCSSではなくSASSを使うほうがなぜ良いのかについて説明しました。今は、それをどうやってプロジェクトに含めるかを学びます。

ブラウザはHTML、CSS、JSだけを理解できるので、我々が知る限り、Sassファイルを理解することはありません。従ってブラウザが理解しやすいように、SassスクリプトをCSSファイルにコンパイルする必要があります。

]

これから、SassをCssにコンパイルする3つの方法について説明します。

#1. コマンドライン

]

SassをCSSにコンパイルする最も簡単な方法の1つは、sassパッケージを使用することです。

sassは、Windows、Mac OS X、Linux、Unixオペレーティングシステムにインストールできます。また、Node Package Manager (NPM)を通じてインストールすることもできます。両方の方法のインストールプロセスは非常にシンプルです。

NPMを使用してsassをインストールするには、まずnode.jsを私たちのマシンにインストールしてから、ノード端末を開いて以下の手順に従います：

1- node --version を実行して、ノードがきちんとセットアップされていることを確認します。

node --version
> 期待値: v16.16.0 またはその他のバージョン

2- sassをインストールします

npm install -g sass

これで、npmのリポジトリからパッケージをダウンロードして、システム全体にグローバルにインストールします。

3- sassファイルを監視する

sass -w style.sass style.css

これでstyle.sassファイルがstyle.cssファイルに自動的にコンパイルされます。

おめでとう 🎉 sassのセットアップが上手くいきました。

さて、このScssコードをあなたのローカルScssファイルにコピー＆ペーストした場合

$socails : facebook twitter youtube;
@each $item in $socails {
    .#{$item}-img{
        background: url('../images/image-#{$item}.png');
    }
}

これがコンパイルされると、

.facebook-img {
  background: url("../images/image-facebook.png");
}

.twitter-img {
  background: url("../images/image-twitter.png");
}

.youtube-img {
  background: url("../images/image-youtube.png");
}

#2 VS Code 拡張機能

live-sassは、sassのコンパイルに使用される最も効率的なVSコード拡張機能の一つです。

]

#3 オンラインコンパイラー

インストール不要でSassをコンパイルできるオンラインツールもあります。例えば sassMeister がそうです。

]

さて、sassのさらなる深堀りを始める時間です。次の記事では、sassの構文についてもっと学びます。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/ak_ram/how-to-add-sass-to-your-project--32cn