scssとは？基本的なことをわかりやすく解説

CSSを書いていると、「もっと効率的にスタイルを管理できたらいいのにな…」と感じること、ありませんか？特に、プロジェクトが大きくなると、CSSファイルがどんどん膨れ上がって、管理が大変になりますよね。そんなときに登場するのが「SCSS」という便利なスタイルシート言語です。

「SCSSって聞いたことあるけど、普通のCSSと何が違うの？」と思うかもしれません。この記事では、SCSSとは何か、その基本的な使い方をやさしく解説していきます。一緒に学んで、CSSを書くのがもっと楽になる方法を身につけていきましょう！

SCSSってなに？

SCSSとは、Sassy CSSの略で、CSSを拡張したスタイルシートの記法の一つです。

実際にはCSSそのものを置き換えるわけではなく、CSSに便利な機能を追加したものと考えるとわかりやすいです。

SCSSのファイルは、最終的に普通のCSSに変換されてブラウザで使われるため、

SCSSで書いておくと効率的にCSSを管理できます。

では、SCSSが具体的に何を提供してくれるのか、基本的な機能を見ていきましょう。

1. ネスト（入れ子構造）でCSSをもっと読みやすく

CSSを書くとき、セレクタが階層化される場面はよくありますよね。

普通のCSSでは、こんな感じで書くことが多いです。

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}

SCSSでは、ネスト構造を使って、セレクタの階層をもっと見やすく書くことができます。

これで、関連するスタイルをまとめて書けるので、読みやすく、管理もしやすいです。

// SCSSではネスト（入れ子）することができる。
nav {
  ul {
    list-style: none;
    
    li {
      display: inline-block;

      a {
        text-decoration: none;
      }
    }
  }
}

どうですか？

一つの要素に関連するスタイルがきれいにまとまっているので、

どの要素に対するスタイルなのかが一目で分かりやすくなります。

2. 変数を使って値を再利用

CSSでは、色やフォントサイズなど、同じスタイルを何度も繰り返し書くことがあります。

SCSSでは、変数を使ってこれらの値を一箇所にまとめて管理できます。

これによって、もし色を変えたい場合でも、変数の値を一回変更するだけで済むので、とても便利です。

例えば、CSSではこう書いていたスタイル↓

h1 {
  color: #3498db;
}

button {
  background-color: #3498db;
}

これをSCSSで変数を使って書くと、次のようになります。

$primary-color: #3498db;

h1 {
  color: $primary-color;
}

button {
  background-color: $primary-color;
}

これで、$primary-colorを変更するだけで、

関連するすべてのスタイルに反映されるので、保守が楽になります。

3. 部分ファイルをインポートしてコードを整理

CSSのファイルが大きくなると、探すのが大変になりますよね。

SCSSでは、部分ファイル（パーシャル）を作って、

複数の小さなファイルに分割し、それらを一つのファイルにまとめることができます。

部分ファイルは、名前の先頭にアンダースコアをつけて作ります（例：_header.scss）。

こうすると、そのファイルが直接CSSにコンパイルされるのではなく、

他のSCSSファイルにインポートされて使われます。

// _header.scss
header {
  background-color: $primary-color;
}

// main.scss
@import 'header'; /* _header.scssをインポート */

これで、コードを整理してスッキリと管理できます。

4. 普通のCSSもそのまま使える

SCSSの素晴らしいところは、普通のCSSもそのまま書けることです。

CSSを書くのと同じ感覚で始められるため、CSSの知識をすぐに活かせます。

例えば、以下のCSSはSCSSとしても全く同じように書けます。

body {
  margin: 0;
  padding: 0;
}

そのため、「CSSは書けるけど、SCSSはちょっと不安…」という方でも、簡単に移行できますし、

少しずつSCSSの便利な機能を取り入れていくことができます。

CSSとの違いって何？

SCSSとCSSの違いは、主にコードの書き方の効率化にあります。

SCSSは、CSSを拡張してさらに強力な機能を提供してくれますが、

最終的にコンパイルされて通常のCSSに変換されます。

つまり、ブラウザが直接SCSSを理解するわけではなく、

開発時にはSCSSを書き、実際にブラウザで動作するのはCSSです。

そのため、SCSSのメリットは

• コードが管理しやすくなる
• ミスが減る
• 保守が簡単になる

など、特にプロジェクトが大きくなったときに効果を発揮します。

その他のCSS拡張言語

SCSSはCSSを拡張した言語ですが、他にも同様の拡張言語がいくつか存在します。

例えば

• SASS（SCSSの一種ですが、インデントベースの書き方をします）
• LESS（同じくCSSを拡張した言語で、SCSSに似た機能を提供します）
• Stylus（こちらも拡張言語の一つで、シンプルな記法が特徴です）

それぞれ特徴があり、用途や好みによって使い分けられますが、

現在のウェブ開発ではSCSSが最も広く使われているので、まずはSCSSから始めると良いでしょう。

まとめ

SCSSは、CSSをもっと効率的に、そして管理しやすくするための強力なツールです。

ネストや変数、部分ファイルのインポートといった基本的な機能を使うだけでも、

プロジェクトの規模が大きくなったときに大きな助けになります。

初めはCSSと同じように書いて、

少しずつSCSSの機能を取り入れていけば、自然にその便利さを実感できるはずです。

焦らず、ゆっくり学んでいきましょうね！