SCSSの書き方をわかりやすく解説

CSSを使ってウェブページのスタイルを作成していると、

「もっと効率よく管理したい」と感じることがありますよね。

特に、プロジェクトが大きくなると、CSSのコードが複雑になり、保守が大変です。

そんなときに助けになるのが「SCSS」。SCSSは、CSSをより効率的に書くための拡張言語です。

この記事では、CSS初心者でも理解しやすいように、SCSSの書き方や便利な機能を紹介していきます。

CSSとの違いをしっかりと説明しながら、SCSS特有の記述方法や、その使い方を一緒に学んでいきましょう。

1. SCSSとCSSの違い

まず最初に、SCSSはCSSを拡張したもので、最終的には通常のCSSに変換されるものです。

つまり、SCSSはCSSと完全に互換性があり、SCSSファイルに普通のCSSを書いても問題ありません。

/* CSSと同じ記述方法も可能 */
body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

しかし、SCSSではCSSにはない、便利な機能がたくさん使えるんです。

次からは、SCSS特有の便利な書き方を見ていきましょう。

2. ネスト記法でスタイルを見やすく整理

CSSでは、複数のセレクタに対して階層ごとにスタイルを指定することがよくあります。

通常のCSSでは、このように階層ごとに書いていきます。

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

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

SCSSでは、ネスト（入れ子構造）を使うことで、セレクタを階層的に書けるようになります。

これによって、スタイルがどの要素に適用されるかが見やすく、コードの可読性が向上します。

nav {
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
      }
    }
  }
}

このように、親子関係が視覚的に分かりやすく整理されるため、

どの要素にスタイルが適用されるかが明確になります。

3. 変数を使って再利用しやすいスタイルを書く

SCSSの大きな特徴の一つは、変数を使ってスタイルの値を一箇所で管理できることです。

たとえば、カラーコードやフォントサイズなど、複数の場所で同じ値を使いたい場合に便利です。

$primary-color: #3498db;
$font-size: 16px;

h1 {
  color: $primary-color;
  font-size: $font-size;
}

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

このように、変数を使うことで、もしデザインの色やフォントサイズが変わったときでも、

変数を変更するだけで、関連するすべてのスタイルに反映されます。

4. mixinでスタイルを再利用

SCSSには、mixin（ミックスイン）という便利な機能があります。

これは、特定のスタイルを再利用するためのもので、複数の場所で同じスタイルを使いたいときに役立ちます。

CSSでは同じコードを何度も書く必要がありますが、

SCSSのmixinを使うと一度定義したスタイルをどこでも呼び出せます。

@mixin button-style {
  padding: 10px 20px;
  border: none;
  background-color: $primary-color;
  color: #fff;
}

button {
  @include button-style;
}

a.button {
  @include button-style;
}

これで、buttonタグとa.buttonに同じスタイルを適用でき、

変更が必要になった際も一箇所を直すだけで済むので非常に便利です。

5. @extendでスタイルを継承

もう一つ便利な機能が@extendです。

@extendは、既存のセレクタのスタイルを別のセレクタに引き継ぐ（継承する）ためのもので、

同じスタイルを複数の要素に適用する場合に使います。

.button {
  padding: 10px 20px;
  background-color: $primary-color;
  color: white;
}

.submit-button {
  @extend .button;
  border: 2px solid #fff;
}

このように、@extendを使うことで、.buttonのスタイルをsubmit-buttonにも適用できます。

Mixinと@extendの違い

@extendはスタイルの継承を行い、複数の要素に共通するスタイルをまとめて適用するのに便利ですが、

@mixinは引数を渡してより柔軟にスタイルを再利用できる点が異なります。

基本的に、カスタマイズが必要な場合は@mixin、

単純にスタイルを共有したいときは@extendを使うと良いでしょう。

6. SCSSでのコメントアウトの方法

SCSSでも、CSSと同じようにコメントアウトができますが、

SCSS特有のコメントアウト方法もあります。

SCSSでは、2種類のコメントアウトが可能です。

/* */：CSSでも使えるブロックコメント。コンパイル後のCSSファイルにも出力されます。

//：SCSS独自のコメント。コンパイル後のCSSファイルには出力されません。

/* これはCSSと同じコメントで、コンパイル後にも残ります */
h1 {
  color: blue;
}

// これはSCSS独自のコメントで、コンパイル後には表示されません
p {
  font-size: 16px;
}

//を使うことで、開発中にのみ使いたいコメントをCSSに残さずに書けるので、

ファイルをクリーンに保つことができます。

まとめ

SCSSは、CSSをより効率的に書くための強力なツールです。

ネスト記法や変数、Mixin、@extendなどの機能を活用することで、

コードの可読性が向上し、メンテナンスがしやすくなります。

また、コメントアウトの種類を使い分けることで、開発時の作業がスムーズになります。

SCSSを使いこなすことで、CSSの管理がもっと楽になり、デザインや開発がスピードアップします。

最初は少しずつ、SCSSの機能を取り入れながら、自分のスタイルに合った書き方を見つけていきましょう！