SCSS

この用語をシェア

概要

SCSS（Sassy CSS）は、Sassの2つの記法のうちの1つで、CSS互換性を持つ構文形式です。通常のCSSコードをそのまま有効なSCSSコードとして扱えるため、既存のCSSプロジェクトにSassの機能を段階的に導入することができます。

SCSSは波括弧（{}）とセミコロン（;）を使用するCSS風の記法を採用しており、多くのWeb開発者にとって親しみやすい構文となっています。.scss拡張子のファイルで保存され、Sassコンパイラによって通常のCSSに変換されます。

基本的な使い方

SCSSはCSSと同じ構文を使いながら、Sassの強力な機能を利用できます：

// 変数定義（CSSカスタムプロパティとは異なる）
$primary-color: #007bff;
$font-size-base: 16px;
$border-radius: 0.375rem;

// ネスト記法
.card {
  background: white;
  border-radius: $border-radius;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .card-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    
    h3 {
      margin: 0;
      font-size: $font-size-base * 1.25;
      color: $primary-color;
    }
  }
  
  .card-body {
    padding: 1rem;
    
    p {
      margin-bottom: 1rem;
      line-height: 1.6;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// ミックスイン定義
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// ミックスイン使用
.button {
  @include flex-center;
  padding: 0.5rem 1rem;
  background-color: $primary-color;
  color: white;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

主な機能

CSS互換性：既存のCSSコードをそのまま使用可能で段階的な移行が容易
変数機能：$記号を使った変数定義と参照でコードの再利用性向上
ネスト記法：HTMLの構造に合わせてCSSを階層化して記述
ミックスイン：@mixinと@includeでスタイルブロックの再利用
継承機能：@extendによる他のセレクタスタイルの継承
演算機能：数値計算、色操作、文字列操作をサポート
制御構文：@if、@for、@while、@eachによる条件分岐とループ

メリット

学習コストが低い：CSS知識があれば容易に習得可能
既存プロジェクトとの親和性：CSSファイルをそのまま.scssに変更可能
チーム開発に適している：CSS経験者なら誰でも理解しやすい構文
豊富なツールサポート：多くのエディタやビルドツールで対応済み
保守性向上：変数やミックスインにより一貫性のあるスタイル管理
開発効率向上：繰り返しコードの削減と構造化されたコード
大規模開発対応：ファイル分割と@importによるモジュール化

この用語をシェア

概要

基本的な使い方

主な機能

メリット

関連技術

この用語についてもっと詳しく

カテゴリ

関連ページ