Web制作でよく使われるSassについて知っておこう！
CSSを作成するために言語、Sass(SCSS)があります。
がっつり使っての現場も当然ありますのでまずは概要を知っておきましょう！
PHP（Hypertext Preprocessor）は、サーバーサイドで動作するプログラミング言語の一つです。主に動的なウェブサイトやアプリケーションの開発に使用されます。
Sass(SCSS)とは？
Sass (Syntactically Awesome Stylesheets) は、CSSをより効率的に書くための拡張言語です。その中でもSCSSはCSSに非常に近い記法で書けるスタイルの一つで、CSSを書く感覚のままにSassの強力な機能を使えるため、初心者にも馴染みやすいです。以下はSCSSの主な特徴です。
ネスト（Nest）
CSSではセレクタが増えるほどコードが複雑になりがちですが、SCSSのネスト機能を使うと、親子関係がわかりやすくなります。
SCSS
.header {
h1 {
color: blue;
}
p {
font-size: 14px;
}
}
→ CSSに変換すると
.header h1 {
color: blue;
}
.header p {
font-size: 14px;
}
変数（Variables）
色やフォントサイズなどを変数として管理できるため、統一感のあるデザインを保ちながら、変更にも対応しやすいです。
SCSS
$primary-color: #3498db;
body {
background-color: $primary-color;
}
ミックスイン（Mixins）と関数（Functions）
再利用可能なスタイルや計算処理を簡単に定義できます。
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flex-center;
}
継承（Inheritance）
共通のスタイルを継承することで、コードの重複を減らせます。
SCSS
%button-style {
padding: 10px 20px;
border-radius: 5px;
}
.btn-primary {
@extend %button-style;
background-color: blue;
}
CSSの進化とSassの必要性について
近年、CSS自体が大きく進化し、Sassが提供してきた機能の一部が標準仕様として導入されています。これにより、Sassの必要性は以前より下がったと考える人も増えています。
CSSの進化例
カスタムプロパティ（CSS変数）
SCSSの変数に近い機能が、CSSで標準的に使えるようになりました。
CSS
:root {
--primary-color: #3498db;
}
body {
background-color: var(--primary-color);
}
@layer、@scopeなどのモジュール化
CSS自体でコードの構造化や重複の防止が可能になりつつあります。
計算式（calc()、clamp()など）
SCSSのcalcやカスタム関数の代わりに、CSSでも強力な計算が可能です。
それでもSassが有用なケース
大規模なプロジェクトやチーム開発
SCSSのミックスインや継承機能は、特に大規模なスタイル設計において依然として有用です。
ブラウザ間の差異対応
一部のCSS機能はブラウザによってサポート状況が異なるため、Sassのプレプロセッサによる変換は有効です。
既存プロジェクトのメンテナンス
既にSassを導入しているプロジェクトでは、コストを抑えてメンテナンスを行える点が魅力です。
Sassを簡単に試せる環境
初心者でも手軽にSassを試すための方法を以下にまとめました。
Sassコンパイラをブラウザで試す
インストール不要で、ブラウザ上でSassを試せるオンラインツールがあります。
SassMeister
SCSSコードを入力すると、リアルタイムでCSSに変換されます。
- メリット: 初期設定不要、すぐに使える。
- デメリット: ファイル構造を再現するような複雑なプロジェクトには向かない。
VS CodeのライブSassコンパイラ拡張
Visual Studio Codeに「Live Sass Compiler」という拡張機能をインストールすれば、簡単にSassを使えます。
- VS Codeをインストール。
- 拡張機能「Live Sass Compiler」を追加。
- .scssファイルを作成し、保存すると自動でCSSファイルが生成されます。
- メリット: ローカル環境でリアルタイムに動作確認ができる。
- デメリット: プロジェクトが複雑になると手動設定が必要。
実務でのSass環境
実務では、プロジェクトの規模やチームのワークフローに応じて、以下の方法でSassが利用されます。
npm + Sass
最も一般的なセットアップで、Node.jsを使ってSassを管理します。
WebpackやViteなどのビルドツールを利用
モダンなプロジェクトでは、WebpackやViteにSassを組み込むことが一般的です。これにより、他のタスク（JSのバンドル、画像圧縮など）と統合できます。
フレームワーク内で使用
Sassは多くのCSSフレームワークやライブラリと組み合わせて使われます。例えば、Vue.jsやReactではSassモジュールをインポートするだけで使える場合があります。
環境選択のポイント
- 学習中: SassMeisterやVS Code拡張で手軽に試す。
- 小規模プロジェクト: npmを使ったローカル環境のセットアップ。
- 中～大規模プロジェクト: WebpackやViteを導入し、効率的なワークフローを構築。
どの環境を選ぶかは、プロジェクトの規模やニーズに応じて決めるとよいでしょう。
まとめ
CSSの進化によって、Sassの必要性が完全に無くなるわけではありません。ただし、小規模なプロジェクトやモダンブラウザをターゲットにした場合には、CSSだけでも十分なことが増えています。Sassの学習はCSSの理解を深める助けになる一方で、最終的にはプロジェクトの規模や要件に応じて使い分けるのが賢明です。
