この記事は、Sassについての知りたいことが全部詰まった情報のまとめを作る目的で制作しました。
Sassについての疑問や、機能についてなど、大抵のことは解決できると思います。
Sassについて全くわからない方でも読めるように作っていますので、ぜひ読んでみてください。（CSSは知らないとわからないかも…）
パパッと気になる箇所だけ読みたい方は目次から飛ぶことができます。
この記事を読んでほしい人
- Sassについてよく知らない人
- SASSとSCSSのどちらの構文を使うか迷っている人
- DartSassについて知りたい人
- VSCode（Visual Studio Code）でのSass環境の構築方法を知りたい人（DartSass）
- Sassの基本的な書き方や、実践的な使い方を知りたい人
Sassのメリットとできること
CSSを効率的に記述できるSassには、たくさんのメリットや出来ることがあります。
Sassを使用する事によって保守性を高めたり、コードを記述する際の効率を上げることが可能になります。
以下の記事では、Sassとは何をするためのものなのか、Sassを導入するメリット、出来ることから、デメリットまで解説しています。
Sassの導入を検討している方はぜひ読んでみてください。
SASSとSCSSどちらの記法を使えばいい？
Sassには、SASS構文とSCSS構文があります。
以下の記事では、SASS構文とSCSS構文の違いや、それぞれの特徴を解説しています。
Sassの導入を検討している方や、Sassを導入済みで、自分が使っていない方の構文が気になる方は必見です。
VSCodeでSassを導入する方法（DartSass）
Sassには「LibSass」「RubySass」「DartSass」の種類があり、現在主流になっているのが、DartSassになっています。
以下ではVSCodeの「DartJS Sass Compiler and Sass Watche」プラグインを使って、DartSassを導入する方法を解説しています。
VSCodeでSass環境を構築するならこのプラグインだと思いますのでぜひ読んでみてください。
VSCodeのDartSassでパーシャルファイルの保存時にもコンパイルできるようにする
前の項目でVSCodeのDartSassプラグインをインストールし、使用してみると正常に動作しますが、パーシャルファイル（分割ファイル）の保存時にはコンパイルされず、少し不便だと思います。
以下の記事ではSassの、どのファイルを保存したタイミングでも、コンパイルされるようにする方法を解説しています。
VSCodeでDartSassをインストールした方は必須だと思うので、ご確認ください。
Sassの基本的な使い方と、便利機能の活用方法
Sassには@mixinや@useなど必須のCSSの記述が大幅に短縮できたり、保守性が上がる機能がたくさんあります。
以下の記事ではSassの基本的な使い方から、Sassを使用するなら必須の機能の使い方まで詳しく解説しています。
コードを使いまわせたり、保守性が上がったりと、便利な機能ばかりですのでぜひ読んでみてください。
まとめ
Sassを使用するならぜひ読んでほしいオススメ記事を紹介しました。
CSSを使っている方なら、Sassの保守性の高さや効率の良さに満足できると思います。
ぜひSassを使用して快適なコーディング環境を構築してください。