Scssとは？CSSをもっと便利に書くためのプリプロセッサ入門
CSSをもっと効率的に書きたい人におすすめなのが「SCSS（Sassy CSS）」です。Sassの後継として登場したSCSSは、通常のCSSとほぼ同じ書き方でありながら、変数・ネスト・ミックスインなどの強力な機能を利用できます。本記事では、SassとSCSSの違い、導入方法、そして実際のコード例を交えて、SCSSの使い方を詳しく解説します。
SCSSとは？
目次
SCSS（Sassy CSS）は、CSSを拡張したプリプロセッサ言語で、ブラウザで直接動作するわけではなく、CSSに「コンパイル」して使用します。従来のCSSと文法がほぼ同じため、学習コストが低く、現場でも標準的に使われています。
- 変数で共通の値を管理できる
- ネスト構文で階層を整理できる
- ミックスイン（@mixin）でコードを再利用できる
- 演算・条件分岐などプログラミング的な書き方も可能
SassとSCSSの違い
もともとSassはインデントで構造を表す「Sass記法」でしたが、CSSと同じ文法で書ける「SCSS記法」が後から登場しました。現在ではSCSSが主流です。
| 項目 | Sass | SCSS |
|---|---|---|
| 拡張子 | .sass | .scss |
| 構文スタイル | インデント式（{}と;なし） | CSS互換（{}と;使用） |
| 学習コスト | やや高い（独自構文） | 低い（CSSと同様） |
| 利用頻度 | 減少傾向 | 主流（推奨） |
SCSSの基本構文
1. 変数
SCSS
$main-color: #3498db;
$padding: 1rem;
button {
background: $main-color;
padding: $padding;
color: #fff;
}変数を使えば、デザイン変更時に一箇所の修正で全体を更新できます。
2. ネスト構文
SCSS
nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
color: #333;
text-decoration: none;
}
}HTML構造に沿ってスタイルを整理でき、保守性が向上します。
3. ミックスイン（@mixin）
SCSS
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include flex-center;
background: #f0f0f0;
height: 200px;
}複数箇所で使うコードを再利用でき、重複を減らせます。
4. ネストと変数を組み合わせる
SCSS
$color-primary: #ff6600;
.card {
border: 1px solid $color-primary;
.card-title {
color: $color-primary;
}
}SCSSの導入方法
Node.js経由でインストール
npm install -g sassコンパイルコマンド
sass style.scss style.css自動監視モード
sass --watch style.scss:style.css変更を保存するたびに自動でCSSへ変換されます。
SCSSの活用例
- デザインテーマを変数化してプロジェクト全体で共有
- ミックスインでレスポンシブレイアウトを効率化
- 部分ファイル（_partial.scss）で構造を分割して管理
まとめ
- SCSSはCSS互換のプリプロセッサであり、Sassの改良版
- ネスト・変数・ミックスインで効率的なスタイル設計が可能
- 現在の開発環境ではSCSSが標準として採用されている
SCSSを導入すれば、コードの見通しが良くなり、デザイン変更にも強い柔軟なCSS設計が可能になります。次回は「Sassファイルの分割とimport管理」について解説します。
