.scss
Code
SCSS（Sassy CSS）
SCSSは最も人気のあるCSSプリプロセッサであるSassのモダンな構文です。CSS互換の構文（中括弧とセミコロン）に変数、ネスト、ミックスイン、関数、モジュールを追加します。SCSSはBootstrap 5、Tailwindビルドツール、エンタープライズデザインシステムで使用されています。
MIMEタイプ
text/x-scss
種類
テキスト
圧縮
無劣化
メリット
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
デメリット
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
.SCSSを使うタイミング
複雑なスタイルシート、デザインシステム、変数・ミックスイン・モジュラーCSSアーキテクチャの恩恵を受けるプロジェクトにSCSSを使用してください。
技術的詳細
SCSSファイルはDart Sass（リファレンス実装）でCSSにコンパイルされます。機能には$変数、@mixin/@include、ネスト、@extend、@use/@forwardモジュール、色・数学・文字列の組み込み関数が含まれます。
歴史
Hampton Catlinは2006年にインデントベースの構文でSassを作成しました。SCSS（Sassy CSS）はSass 3.0（2010年）でCSS互換構文として導入され、すぐに主要なSassスタイルとなりました。