UnleashZealUpliftPersevereOvercomeDrive

scssとcssの違い

SCSSとは？

SCSSは、CSSの拡張機能を持つプリプロセッサの一種。
「Sassy CSS」の略称であり、Sassと呼ばれるスタイルシート言語の最新バージョンで導入された記法。
SCSSファイルは.scssという拡張子を持ち、CSSの文法をベースにしている。

SCSSを使うことで、以下のような機能が利用可能になる

  • ネスト：セレクタを階層的に記述できる。
  • 変数：スタイルで再利用可能な値を定義できる。
  • ミックスイン(mixin)：コードを再利用可能なテンプレート化できる。
  • 演算：数値や色の計算が可能。

※SCSSファイルは、ビルドツール（例: webpack, gulp）やCLIツールを用いてCSSにコンパイルされ、ブラウザで利用できるようになる。

CSSとの違い

文法の拡張

CSSの文法はそのままSCSSで使えるため、既存のCSS知識を活かしながら移行できる。
また、SCSSにはCSSにはない便利な文法が追加されている。

ネスト

セレクタの階層構造を簡潔に記述可能。

.nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

変数

"$"で変数を定義可能。

$primary-color: #3498db;

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

ミックスイン(mixin)

再利用可能なスタイルのブロック。

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(5px);
}

Extend

共通スタイルを継承。

%message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend %message;
  border-color: green;
}

演算

数値・色・単位の計算が可能。

.container {
  width: 100% - 20px;
}

条件分岐・ループ

簡単なロジック処理が可能。

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100px * $i;
  }
}

導入方法

  1. Sassのインストール(npm使用)
npm install -g sass
  1. SCSSのコンパイル
sass style.scss style.css
← TOP