2025.01.08 2025.01.08

【デイトラ学習記録1】結論：CSSの上位互換！SCSSとは？使い方も解説！

juru

じゅる

どうも！フリーランスエンジニアのじゅるです！

本記事では、デイトラWEB制作コースの初級編DAY23~25で学んだ、CSSの上位互換ともいえる「SCSS」について解説していきます！

おさるくん

じゅるさ〜ん、自分のポートフォリオサイトのCSSを書いているんだけど、テーマカラーを変更しようと思ったら色んなところを修正しないといけなくて大変だよ〜

CSSを使っていると、「コードが長くなって見づらいな…」と感じることはありませんか？そんな時に便利なのがSCSSです。

この記事では、SCSSの基本的な使い方やCSSとの違い、実際の活用方法について、初心者の方にもわかりやすく説明します。

じゅる

よし、今日はSCSSについて解説するで！
デザイン作業が効率化するから、ぜひ最後まで読んでみてな！

この記事でわかること

SCSSとは何か？
SCSSを使うメリット
SCSSの基本的な使い方
実践的なSCSSの活用例

SCSSとは？
SCSSを使うメリット
SCSSの基本的な使い方
- 基本的なSCSS構文
実践的なSCSSの活用例
まとめ

SCSSとは？

おさるくん

そもそもSCSSって何？

SCSSは、CSS（Cascading Style Sheets）の上位互換であり、Sass（Syntactically Awesome Stylesheets）の一部として提供されています。CSSと同様にWebページのデザインを記述する言語ですが、記述の仕方にさまざまな拡張機能が追加されています。

特徴的なポイント

ネスト構造の記述が可能
変数を使ってコードを効率化
ミックスインによる再利用性向上
インポートでファイル分割が簡単

じゅる

CSSよりも直感的に書けて、整理されたコードが実現できるで！

SCSSを使うメリット

おさるくん

普通のCSSより何がいいの？

SCSSを使うことで、以下のようなメリットがあります。

コードの保守性が向上
ネスト構造や変数の利用により、長いコードでも簡単に読みやすくできます。
作業の効率化
重複する記述をミックスインでまとめることで、手間を省けます。
チーム開発がしやすい
インポート機能でコードをモジュール化し、大規模プロジェクトにも対応できます。

じゅる

大規模なデザイン案件では特に重宝するで！

SCSSの基本的な使い方

おさるくん

実際にどうやって書くの？

SCSSを始めるには、まずSassのインストールが必要です。Node.jsがインストールされている環境では、以下のコマンドで簡単にインストールできます。

npm install -g sass

その後、以下のようにSCSSファイルを作成します。

基本的なSCSS構文

ネスト構造

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
    color: #333;
  }
}

変数の使用

$primary-color: #3498db;

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

ミックスイン

@mixin button-style {
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

button {
  @include button-style;
  background-color: $primary-color;
}

じゅる

書き方を覚えれば、かなり効率よくコーディングできるようになるよ！

実践的なSCSSの活用例

おさるくん

どんな場面で使えるの？

テーマカラーの管理

プロジェクト全体で共通のカラースキームを使いたい場合、変数を利用して簡単に統一できます。

$primary-color: #3498db;
$secondary-color: #2ecc71;

.header {
  background-color: $primary-color;
}

.footer {
  background-color: $secondary-color;
}

レスポンシブデザイン

メディアクエリをネスト内に書くことで、コードの可読性が向上します。

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 80%;
  }
}

UIコンポーネントの共通スタイル化

複数のコンポーネントで共通するデザインをミックスインでまとめられます。

@mixin card-style {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
}

.card {
  @include card-style;
  background-color: #fff;
}

.card-dark {
  @include card-style;
  background-color: #333;
  color: #fff;
}

じゅる

現場で役立つ例をぜひ試してみてな！