この用語をシェア
概要
Sass（Syntactically Awesome Style Sheets）は、CSSに変数、ネスト、ミックスイン、関数などのプログラミング機能を追加するCSSプリプロセッサです。2006年にHampton Catlinによって開発され、現在はNathan Weizenbaum が主導して開発が進められています。
Sassを使用することで、より保守性が高く再利用可能なCSSコードを書くことができ、大規模なWebプロジェクトでの開発効率を大幅に向上させることができます。SassはRubyで書かれており、.sass形式と.scss形式の2つの記法をサポートしています。
基本的な使い方
Sassの主要な機能を使った基本的な記述例です：
// 変数の定義
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, Arial, sans-serif';
$border-radius: 8px;
// ミックスインの定義
@mixin button-style($bg-color, $text-color: white) {
background-color: $bg-color;
color: $text-color;
padding: 12px 24px;
border: none;
border-radius: $border-radius;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background-color: darken($bg-color, 10%);
transform: translateY(-2px);
}
}
// ネストと親セレクタ参照
.navbar {
background-color: $primary-color;
padding: 1rem 0;
.container {
max-width: 1200px;
margin: 0 auto;
.nav-links {
display: flex;
list-style: none;
li {
margin-right: 2rem;
a {
color: white;
text-decoration: none;
font-family: $font-stack;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
// ミックスインの使用
.btn-primary {
@include button-style($primary-color);
}
.btn-secondary {
@include button-style($secondary-color, #333);
}主な機能
- 変数：色、フォント、サイズなどの値を変数として定義し再利用可能
- ネスト：CSSセレクタを階層構造で記述し、HTML構造に近い形で整理
- ミックスイン：再利用可能なスタイルブロックを定義し、引数も渡せる
- 継承：@extendディレクティブで他のセレクタのスタイルを継承
- 演算：数値計算、色操作、文字列操作が可能
- 条件分岐・ループ：@if、@for、@while、@eachで制御構造を記述
- 関数：カスタム関数の定義と組み込み関数の利用
メリット
- 開発効率向上：変数やミックスインにより重複コードを削減
- 保守性向上：変数を使うことで一括変更が容易になる
- コードの整理：ネスト機能により構造化されたコードが書ける
- 再利用性：ミックスインや関数で共通スタイルを効率的に管理
- 数学的操作：計算機能により動的なサイズ調整が可能
- 豊富な関数：色操作、文字列操作などの組み込み関数が充実
- 大規模プロジェクト対応：ファイル分割とインポート機能でスケーラブル
関連技術
Sassは以下の技術と組み合わせて使用されます：
- CSS：Sassコンパイル後の出力対象となるスタイルシート言語
- SCSS：CSS互換の記法を持つSassの拡張構文
- Compass：Sassライブラリフレームワーク（現在は非推奨）
- PostCSS：Sassとの組み合わせで使用される後処理ツール
- Webpack：モジュールバンドラーとしてSassのコンパイルを統合
- Gulp/Grunt：タスクランナーでSassのビルドプロセスを自動化
- Bootstrap：Sassで書かれたCSSフレームワーク