Sass（サス、サース）とは、CSSを効率的に書くための拡張機能・メタ言語です。
実は以前、転職面接で「Sassって使ったことありますか？」と質問されたことがあったのですが、その時SaaSとごっちゃになったのと存在を知らなかったので、答えられずかなり恥ずかしい思いをしてしまいました。
もちろん面接の方も知らないんか〜と残念そう。
そんなことがあり、最近フロントエンドの学習を進める中で、ようやくSassをちゃんと触ってみました。
改めて触ってみるとCSSをプログラミングみたいに書けて、ここまで便利なの！？と衝撃。
ネストや変数、mixin など、これまで1つずつ書いていた手間を一気に減らしてくれる機能が多く、もっと早く知りたかった・・と思うレベルで使いやすいメタ言語でした。
同じように聞いたことはあるけど、なんとなく難しそう〜と思っている人にこそぜひ触ってみてほしい！
この記事ではSassの基本からメリット、実際の書き方までポイントをまとめて紹介します。
Sass（サス） とは？
Sassは、CSSをより便利に効率よく書くための メタ言語（CSSプリプロセッサ）。
通常のCSSにはない 変数・ネスト・mixin・関数・継承などの機能が追加されており、スタイルコードの管理を大幅に楽にしてくれます。
.scss または .sass という専用の拡張子で記述し、最終的にはブラウザが読み込める普通のCSSにコンパイルして使う という仕組み。
書きやすい文法で書いて、出力はいつものCSSという、フロントエンド開発を効率化するための強力なツールです。
特に規模が大きくなりやすい開発では、Sass があることでコードが見やすく管理も効率的なので、チームでも個人でも圧倒的に保守しやすくなるメリットが！
Sassの主な機能
Sassには通常のCSSには存在しない便利な機能が数多くあります。
ここでは、特に日常的に活躍する主要機能をピックアップして紹介しますね。
ネスト（入れ子構造）
CSSではセレクタが長くなりがちですが、SassならHTMLの構造に合わせて入れ子で書けます。
HTML構造に合わせてスタイルを書けるので、長いセレクタを何度も書く必要がなくなります。これにより可読性が高まり、複雑なUIのスタイル管理が楽に。
.card {
padding: 20px;
background: #fff;
.title {
font-size: 18px;
font-weight: bold;
}
.text {
color: #555;
}
}変数（Variables）
よく使う色、フォントサイズ、余白などを変数化して再利用できます。
色や数値を変数で管理でき、デザインの統一性を保ちながら変更も簡単になります。
$primary: #4a90e2;
$spacing: 16px;
button {
background: $primary;
padding: $spacing;
}
個人的にはこの変数に感動しました！すごーく楽ちん♪
mixin（ミックスイン）
繰り返し使う CSS パターンをテンプレート化して再利用できる仕組み。
Flexの配置や、レスポンシブのブレークポイント設定などが圧倒的に書きやすくなります。
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include flex-center;
}@extend（継承）
あるクラスのスタイルを別のクラスに引き継ぐ機能。
似たデザインが多い UI コンポーネントを作るときに、便利。
.base-btn {
padding: 10px 20px;
border-radius: 4px;
}
.primary-btn {
@extend .base-btn;
background: #4a90e2;
}計算（算術演算）
+ - * / などを使って、サイズや余白を数値計算できます。
デザインの比率をそのままコードに落とし込めるのが魅力。
.container {
width: 100% - 40px;
padding: 20px;
}$primary * 2 (この変数の2倍)こんなことも出来ちゃいます。これも便利！
パーシャル & @use / @forward（ファイル分割）
スタイルシートを複数ファイルに分けて管理するための機能。
プロジェクトが大きくなっても、役割ごとに整理して見失いにくくなります。
// _variables.scss
$primary: #4a90e2;
// main.scss
@use 'variables';
button {
color: variables.$primary;
}関数（Functions）
Sass独自の関数を利用したり、自分で関数を定義して色変換や計算を行えます。
CSSでは実現しづらい高度なスタイル制御が可能。
// 倍数で余白を返す関数
@function space($multiplier) {
$base: 8px;
@return $base * $multiplier;
}
.box {
padding: space(2); // 16px返る
margin-top: space(3); // 24px返る
}Sassは「CSSを便利にする」レベルではなく、CSSを書く開発フローそのものを改善してくれるのが大きな魅力です。
Sassの書き方
Sass には Sass記法（インデント式）と SCSS記法 があるけど、現場で最も使われているのはSCSSと言われています。
インデント式（Sass記法）
Sassは初期に登場した古い記法で、波カッコ{} やセミコロン ; を使わない。Pythonっぽいインデント（字下げ）で階層を表現する書き方です。
.card
background: #fff
padding: 10px
.title
font-size: 18px
&:hover
background: #f5f5f5
SCSS記法
現在の圧倒的主流な書き方はこっち！
後から登場した書き方のSCSS。CSSの書き方とほぼ同じで、{} と ; を使います。
.card {
background: #fff;
padding: 10px;
.title {
font-size: 18px;
}
&:hover {
background: #f5f5f5;
}
}
Sassは転職でほぼ必須スキル
Sassを学ぶ最大の魅力は開発効率が上がるだけでなく、転職市場で評価されやすいスキルを自然に身につけられるところだと感じます。
CSSの延長線ではなく、構造的にスタイルを管理できるエンジニアとして見てもらえるため、即戦力としての印象が強くなります。
大規模開発に耐えられるスタイル管理ができる
ネスト・変数・mixin・パーシャルを使うことで、CSSを設計して書けるようになります。
プログラミング他言語とも精通しており、実務で重視されるポイントです。特に複数人での開発では必須に近い考え方。
理由：
大規模プロジェクトは後からスタイルが増え続けるため、Sassの仕組みが使えないと破綻したCSSになる → 現場で困る。
コードが圧倒的に読みやすくなり、現場で手戻りが減る
変数化やファイル分割により、
「この色どこで使ってる？」
「このクラス何ページで使ってる？」
といった迷いが減るので、修正がとても速くなる。
理由：
既存のSassコードを読める人は、プロジェクト参加後すぐに手を動かせる。
デザインシステムに強い
色・余白・フォントサイズなどを変数化することで、デザイン全体の統一性が保ちやすくなる。
理由：
UIへの意識が高いエンジニアは、フロント系の現場で重宝される。
React / Vue / WordPress / Laravel など幅広い現場で使える
Sassは特定のフレームワーク依存ではないため、どんな案件・現場でもそのまま使えるスキル。
理由：
技術選択が違う現場でもスキルとして評価される。
Sassの勉強法
Sassは文法自体はそこまで難しくなくて、CSSを理解している、何かしらのプログラミング言語の基礎が分かれば始めやすい。
手を動かしながら覚えるのがいちばん効率的です。
まずは公式ドキュメントで基本文法を読む
Sass公式は読みやすく、実例も多いので最初の理解に最適。
- 変数
- ネスト
- mixin
- @extend
- パーシャル
- @use と @forward
これらを「こういうのがあるんだ」と知るだけで十分です。
自分のCSSをSassに書き換えてみる
いちばん学習効率が高いのがコレ！私も実際に試しました。
普段書いているCSSをそのまま .scss に置き換えて、以下のように改善していくと一気に理解が深まり実践的。
- 共通しているテキストカラーをすべて変数化
- 共通している余白・フォントサイズを変数化
- よく使うレイアウトをmixin化
- ファイルを役割ごとに分割
- ネストでコード量を整理
変えるべき箇所がわかりやすく、逆にバラバラなフォントサイズの箇所も見つけやすく、トンマナの統一にも一役買ってくれます。
VSCodeでSass環境を導入
安心してください。
VSCodeでSass環境を構築するなら、下記プラグインだけで十分です。
Live Sass Compilerをインストール
- SCSS → CSS に自動でコンパイルしてくれる
- 保存時に自動コンパイル可能
- インストール後、右下の「Watch Sass」をONにするだけでOK
CSSファイルが自動生成されるので簡単です！
如何でしょうか？
難しい講座や書籍を読まなくても、自然にすぐSassが身につくくらいハードルが優しく感じましたのでぜひこの機会に触ってみましょう！
