LoginSignup
21
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sun_22in株式会社PRUM

初心者にはSassのコンパイルが紛らわしすぎる

Last updated at Posted at 2025-06-05

この投稿を読んでわかること

  • Sassとは
  • CSSとの違いは
  • コンパイルの仕方
  • どんな時にSassを用いるのか

コンパイルって言葉も覚えにくけりゃ、作業もむずい

やっとhtml/cssを乗り越えた初心者にしてみれば、JavaScriptも大変なのに、チーム開発のあれこれ（FLOCSSやらBEMやらGitやら）も本当に難しいんですよ…

やっとこさ乗り越えたので、備忘録的に書いていきます。

Sassってなんぞや

Syntactically Awesome StyleSheetの略。
（構文的に超すごいスタイルシート）

CSSを拡張したメタ言語で、CSSのコード記述をより効率的にかつ可読性を高めるためのツールをSassと言います。

記述法は2つ

Sassは「SASS」という記法と「SCSS」という記法の2つが存在します。

SASS：インデントベースの構文を使用し、ブレース（{}）やセミコロン（;）を省略できる。

$primary-color: #333

body
  color: $primary-color

h1
  font-size: 2em

見た目は簡潔で見やすいですね。続いて、SCSSについて。

SCSS：CSSに非常に似た構文で、ブレースとセミコロンを使用する。

$primary-color: #333;

body {
  color: $primary-color;
}

h1 {
  font-size: 2em;
}

書き方はCSSと同じです。

他にも違いがあり、それを説明するためには、まずSassの特徴について説明する必要があります。

Sassの特徴

Sassの特徴
①ネスト（入れ子構造）によって記述を簡略化できる
②変数が利用できる
③ミックスイン（@mixin）が利用できる
④ファイル分割をすることができる

①ネスト（入れ子構造）によって記述を簡略化できる

これは親子関係がわかりやすい記載ができるということです。どういう意味か、実際のコードで説明します。

<nav>
    <ul>
        <li><a href="#">ナビゲーション１</a></li>
        <li><a href="#">ナビゲーション２</a></li>
        <li><a href="#">ナビゲーション３</a></li>
    </ul>
</nav>

というhtmlがあったとき、CSSは以下のように指定していきます。

nav ul {
    display:flex;
    gap: 10px;
}
nav ul li {
    color:#333333;
    padding:20px;
}
nav ul li a {
    text-decoration:none;
}

これらをSASS、SCSSの記法でそれぞれ記述すると、下記のようになります。

/*SASS記法*/
nav 
    ul 
    　display:flex
    　gap: 10px
    li 
    　color:#333333
    　padding:20px
    a 
    　text-decoration:none

/*SCSS記法*/
nav {
    ul {
    　display:flex;
    　gap: 10px;
    }
    li {
    　color:#333333;
    　padding:20px;
    }
    a {
    　text-decoration:none;
    }
}

インデントがあるので、どの入れ子なのかがパッと見てわかるような記述ができます。

②変数が利用できる

CSSと大きく異なるのは変数が利用できることです。これを画面サイズの指定や、色の指定に使うことによって、記載が簡略化されたり、変更が容易になります。

/*SCSS記法(色の指定)*/
$main-color: #3498db;
$padding: 20px;

.button {
  background-color: $main-color;
  padding: $padding;
  color: white;
}
/*ブランドカラーを固定している時などは使い勝手がいいシステム*/

/*SCSS記法(サイズの指定)*/
$screen: mobile;
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;

.container {
  @if $screen == mobile {
    @media (max-width: $breakpoint-mobile) {
      background: lightblue;
    }
  } @else if $screen == tablet {
    @media (max-width: $breakpoint-tablet) {
      background: lightgreen;
    }
  } @else {
    background: white;
  }
}
/*ブレークポイントも変数化でき、@ifを用いることで画面サイズに応じたスタイル分岐も可能*/

③ミックスイン（@mixin）が利用できる

よく使うスタイルのテンプレート（ひな型）を定義できる機能。
引数を使って柔軟に値を変更することができます。

@mixin button-style($bg-color, $text-color) {
  padding: 10px 20px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 5px;
}

.btn-primary {
  @include button-style(#3498db, white);
}

.btn-secondary {
  @include button-style(#95a5a6, black);
}

よく使われる項目：「ボタンのスタイル」や「共通の枠・影・間隔」

④ファイル分割をすることができる

CSSは基本的に、style.cssにのみスタイルを記載していきます。
Sassはこの後説明するコンパイルによって、scssファイルを分割しても1つのstyle.cssに変換してくれるので、以下の例のように、ファイルを分割して記載することができます。

//構造
scss/
├── _variables.scss    // 色・余白などの変数定義
├── _mixins.scss       // ミックスイン定義
├── _reset.scss        // リセットCSS
├── _header.scss       // ヘッダーのスタイル
├── _footer.scss       // フッターのスタイル
├── _buttons.scss      // ボタンスタイル
└── main.scss          // 上記すべてを読み込む中心ファイル

//main.scssに以下を記載することで、分割しても1つのcssに変換ができる
@use 'variables';
@use 'mixins';
@use 'reset';
@use 'header';
@use 'footer';
@use 'buttons';

FLOCSSなどの設計と組み合わせることで、保守性の高い設計を作ることができる。
役割ごとにファイルを分割することで、修正がしやすくなったり、更新時の影響範囲が狭まるので、テストや確認がしやすい。

コンパイルの仕方

先ほどコンパイルという言葉が出てきましたが、どういう意味でしょうか。

コンパイル
scssファイルをcssファイルに変換する作業のこと。

コンパイルの仕方は

  • Live Sass Compiler（個人・小規模開発向け簡易版）
  • Dart Sass
    の2つが存在する。

Live Sass Compiler

VSCodeに入れる拡張機能で、設定を行った後コーディングしていると、リアルタイムでCSSに変えてくれる。

設定の流れ
１、VScodeの拡張機能から「Live Sass Compiler（Glenn Marks）」をダウンロードする
２、　.vscode/settings.jsonに下記を記載する
※やり方
　作業ディレクトリの中に.vscodeディレクトリを作る
　cmd+Shift+Pで開いた画面からPreferences: Open User Settings(JSON)を探して開く
　下記を記載する
　ファイル→名前をつけて保存→.vscodeディレクトリに保存する

settings.json

 {
    "workbench.colorTheme": "Visual Studio Dark - C++",
    "editor.formatOnSave": true,
    "diffEditor.ignoreTrimWhitespace": false,
    
    //以下を記載する
      "liveSassCompile.settings.formats": [
    {
      "format": "expanded", //出力形式（きれいに整形）
      "extensionName": ".min.css",// 出力ファイルの拡張子
      "savePath": "/asset/css" // 出力先のフォルダ
    }
  ]
}

POINT　元々記載されている{}内に追記すること

Dart Sass

Sass公式が出している本物の変換ツールで、会社やチームで開発するときによく使う。
コマンドを使ってCSSに変換するものから、VScodeで簡単に変換できるものもある。
以下のサイトの説明がわかりやすかったので、添付します。

結局Sassってどんな時に使うの？

以下の時に場合分けできると思います。

状況 Sassを使う理由
サイトのパーツが多く、CSSが長くなる コードを分けたり再利用しやすくなる
色やサイズが何度も出てくる 変数を使って一括管理できる
ボタンや枠線など、似たスタイルが多い ミックスインでテンプレ化できる
複数人で開発している 整理しやすい構造にできて保守しやすい
メディアクエリ（レスポンシブ）をよく使う 入れ子で管理できるので見やすい

記法はどちらを使うの？

結論
最近の主流は、CSSと同じ記述もでき、ネストでも書けるSCSS記法

CSSと書き方が近いSCSS記法が主流として使用されています。

まとめ

個人で開発する時、言ってしまえば分かりにくくても、自分がわかっていれば問題なかったりします。ただ開発は他の人・会社色々な人と協力して行うことがほとんどです。
そんな場面を経てチーム開発が円滑に進むよう、さまざまな手法が開発されていったんだなあ、と歴史を感じました :eyes:
Image_fx (7).jpg

21
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
21
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?