ウェブ制作
コーディング
【CSS効率化】
Sass（SCSS）の基本から
使い方までわかりやすく解説！
そらまめ@プログラマー
2026.02.10
#Oookey_blog_024
Share on
こんにちは！プログラマーのそらまめです。
CSSを書いていて、
・同じ色を何度も書いている
・セレクターが長くなりすぎて分かりづらい
・ファイルが肥大化して管理しづらい
こんな経験、ありませんか？
そんな悩みを解決してくれるのが「Sass（サス）」です。
この記事では、Sassの基本から実務で使える考え方までを、初心者向けにわかりやすく解説します。
目次
1.Sassとは？
Sassは「CSSの拡張言語」です。
よく「CSSのメタ言語」と言われますが、
正確には CSSをより効率的に書くための拡張機能だと考えてください。
・CSSでは使えない変数
・ネスト（入れ子）構造
・ファイル分割と再利用
が可能になり、保守性・可読性・作業効率が大幅に向上します。
★補足
Sassで書いたコードは、そのままではブラウザでは動きません。
一度「CSSに変換（コンパイル）」してから使う必要があります。
その変換作業を自動で行ってくれるのが、後述するツールです。
ちなみに Sass は
Syntactically Awesome Style Sheets（構文的にイケてるスタイルシート）の略です。
2. Sass / SCSS / SASS の違い
この3つは似ていますが役割が違います。
・Sass：言語の名称
・SCSS / SASS：Sassの「記法（書き方）」
つまり「Sassを使っている」と言っても、
どの記法を使っているかを意識する必要があります。
★補足
ネットの記事や現場では「Sass（SCSS）」という表現がよく使われます。
これは「Sassという言語を、SCSS記法で使っている」という意味です。
3. SCSSとSASSの記法の違い
【SASS（インデント記法）】
・{} を使わない
・; を書かない
・インデントで構造を表現
【コード例】
Copied!
div
width:300px
ul
background-color:black
li
width:25%
p
font-size:16px
CSS未経験の人には、意外とこちらの方が読みやすい場合もあります。
【SCSS（CSS互換記法）】
・{} と ; を使う
・CSSにほぼそのまま書き足せる
【コード例】
Copied!
div {
width:300px;
ul {
background-color:black;
li {
width:25%;
p {
font-size:16px;
}
}
}
}
CSS経験者にはこちらがおすすめです。 実務でもSCSSが主流なので、基本はSCSSでOKです。
4. Sassの始め方（VSCode）
Sassを使うにはコンパイル環境が必要ですが、
VSCodeなら拡張機能で簡単に始められます。
手順
1. Live Sass Compiler をインストール
2. 拡張子が .scss のファイルを作成
3. 右下の「Watch Sass」をクリック
4. 自動でcssファイルが生成される
以降は、scssに書くだけで自動的にcssへ変換されます。
★補足
生成されたCSSファイルを、HTMLから読み込むのを忘れないようにしましょう。
実際にブラウザが参照しているのは「CSSファイル」です。
5. Sassの特徴
① ネスト構造（入れ子）
HTML構造に沿って書けるため、関係性が一目で分かります。
Copied!
ul {
display: flex;
li {
p {
font-size:1.6rem;
&:hover {
font-size:3rem;
}
&.active {
font-size:2rem;
}
}
}
}
「&」はこれまでのセレクターを呼び出す記号です。
ul li p:hover を省略して書けるのが特徴です。
★補足
ネストが深くなりすぎると、逆にCSSが読みにくくなることもあります。
目安としては「3〜4階層まで」に抑えるのがおすすめです。
② 変数
Sassでは変数が使えます。
Copied!
$defaultColor: #ffffff;
div {
background-color: $defaultColor;
}
色やサイズを変数化することで、修正が一瞬で終わります。
★補足
特に以下は変数化しておくと便利です。
・メインカラー
・フォントサイズ
・ブレークポイント（SP / PC）
③ extend / mixin
・extend：既存クラスを継承
・mixin：引数付きで再利用可能
【extendの例】
Copied!
.button {
width:300px;
height:75px;
background-color:black;
}
div {
@extend .button;
}
【mixinの例】
Copied!
@mixin btn($background-color:black) {
width:300px;
height:75px;
background-color:$background-color;
}
div {
@include btn(red);
}
★補足
extendはスタイルを「コピー」する機能ではなく、
セレクタを結合して1つのルールとして出力する仕組みです。
そのため、たまたま見た目が似ている要素に使うと、
予期しないスタイル変更が起きやすくなります。
extendは「意味・役割が同じクラス同士」で使うのが前提です。
最近の実務では mixin の方が使われることが多いです。
④ use / import
どちらもファイルを読み込む際に使いますが、基本的には use を使ってください。
Copied!
@use 'button';
div {
color: button.$main-color;
}
import は変数の競合が起きやすいため、基本は use を使いましょう。
6. ファイル構造（小規模〜大規模）
scss
├ _base.scss
├ _layout.scss
├ _components.scss
├ _utils.scss
└ main.scss
ファイル名の先頭に「_」を付けることで、
CSSに直接出力されない部品ファイルとして扱えます。
★補足
この構成を使うことで、
「どこに何が書いてあるか」がすぐ分かるようになります。
7. main.scss の役割
main.scss は読み込み専用のファイルです。
基本的には、「_」を付けたファイルを読み込みます。
これにより、HTMLで読み込むCSSファイルを1つにまとめることができ、
読み込み順トラブル防止、HTTPリクエスト削減に繋がります。
Copied!
@use 'base/reset';
@use 'base/variables';
@use 'components/buttons';
スタイルは基本的に各ファイルに書き、 main.scss には直接スタイルを書かないのが一般的です。
8. 実務でよく使うSass Tips
Tips① @media を整理する
Copied!
.button {
width: 300px;
@media screen and (max-width: 768px) {
width: 100%;
}
}
Tips② ブレークポイントをmixin化
Copied!
@mixin sp {
@media screen and (max-width: 768px) {
@content;
}
}
.button {
width: 300px;
@include sp {
width: 100%;
}
}
Tips③ %プレースホルダー
Copied!
%btn-base {
width: 300px;
height: 75px;
border-radius: 8px;
}
.button-primary {
@extend %btn-base;
background-color: blue;
}
.button-secondary {
@extend %btn-base;
background-color: gray;
}
9. Sassを使うときの注意点（実務目線）
・ネストは深くしすぎない（3〜4階層まで）
・何でも mixin にしない（使い回すものだけ）
・変数名は「役割」で命名する
❌ $red → ⭕ $main-color
10. 終わりに
Sassを使うことで、
・CSSが読みやすくなる
・修正が楽になる
・ファイル管理が圧倒的に楽になる
一度慣れると、素のCSSには戻れなくなります。
ぜひ次の制作からSassを導入してみてください！
Share on
