Caution
お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。
辞典
- トップページ
- Sass辞典
Sass辞典 一覧ページ
| 初心者向け: 概要と特徴、学習順ガイド | SCSS/Sass記法・変数・ネスト・ミックスインの全体像と学習順。 |
| 【環境構築】Sassのインストールとコンパイル | Dart SassのインストールとSCSSファイルのコンパイル手順。 |
| @at-rootディレクティブ | ネスト内のセレクタをルートレベルに引き上げて出力するディレクティブ。 |
| @contentディレクティブ（コンテンツブロック） | @mixin内にスタイルブロックの差し込み口を設ける@content。 |
| @debug / @warn / @error（デバッグ） | @debug・@warn・@errorでコンパイル時にメッセージを出力する。 |
| !defaultフラグ（デフォルト値） | 未定義の場合のみ値をセットする条件付き代入フラグ。 |
| @eachループ（リスト・マップの反復） | リスト・マップの各要素に対してスタイルを自動生成する@each。 |
| @extendディレクティブ（スタイル継承） | 別のセレクタのスタイルを継承してCSSを重複なく出力する@extend。 |
| @forループ（数値範囲の繰り返し） | 数値範囲を繰り返し連番クラスなどを自動生成する@for。 |
| @forwardディレクティブ（モジュール転送） | 読み込んだモジュールのメンバーを別ファイルへ転送・公開する@forward。 |
| @functionディレクティブ（カスタム関数） | 値を計算して返す@returnで終わるカスタム関数の定義。 |
| !globalフラグ（グローバル変数） | ローカルスコープの変数をグローバルへ昇格させる!global。 |
| if / else | 条件に応じてコンパイル出力を切り替える@if/@else if/@else。 |
| @importディレクティブ（非推奨） | グローバルスコープに展開する旧来の@import（現在は非推奨）。 |
| @includeディレクティブ（ミックスイン呼び出し） | @mixinで定義したスタイルブロックをセレクタに呼び出す@include。 |
| インストールとコンパイル手順 | Dart Sassのnpmインストールと単発・監視コンパイルの設定。 |
| 補間（#{$変数}記法） | #{式}でセレクタ名やプロパティ名に変数を埋め込む補間記法。 |
| lighten() / darken()（色の明暗調整） | 非推奨のlighten/darkenとcolor.adjust()への移行。 |
| リスト型データ | スペース・カンマ区切りの複数値をひとまとめにするリスト型。 |
| マップ型データ（連想配列） | キーと値のペアを管理する連想配列型とsass:mapの操作関数。 |
| @mediaのネスト（レスポンシブ記述） | コンポーネントのスタイルと同じ場所に@mediaをネストして記述。 |
| mix()（色の混合） | 非推奨のmix()とcolor.mix()への移行。2色の混合比率指定。 |
| mixin | @mixinで再利用可能なスタイルブロックを定義し@includeで呼び出す。 |
| ネスト（セレクタの入れ子） | 親子・擬似クラス・擬似要素をコードの入れ子で表現するネスト構文。 |
| 親セレクタ参照（&アンパサンド） | &で現在の親セレクタを参照しBEM記法・擬似クラスを簡潔に書く。 |
| パーシャル（_ファイル） | _で始まる単体でCSSに出力されない部品用Sassファイル。 |
| percentage()（パーセンテージ変換） | 小数値を%単位のパーセンテージに変換するビルトイン関数。 |
| プレースホルダーセレクタ（%） | %で始まるCSSに出力されない@extend専用スタイル定義。 |
| @returnディレクティブ（関数の戻り値） | @function内で計算結果を返して処理を終了する@return。 |
| rgba() / hsla()（色指定関数） | CSS標準rgba()/hsla()とSass独自の2引数rgba()形式。 |
| sass:colorモジュール（色操作） | 色の調整・混合・チャンネル取得を行うsass:colorモジュール。 |
| sass:listモジュール（リスト操作） | リスト操作関数を提供するsass:listモジュール。 |
| sass:mapモジュール（マップ操作） | マップ操作関数を提供するsass:mapモジュール。 |
| sass:mathモジュール（数値計算） | 数値計算関数を提供するsass:mathモジュール。 |
| sass:metaモジュール（型検査・デバッグ） | 型検査・関数取得・動的ロードを行うsass:metaモジュール。 |
| sass:selectorモジュール（セレクタ操作） | セレクタ操作関数を提供するsass:selectorモジュール。 |
| sass:stringモジュール（文字列操作） | 文字列の検索・切り出し・置換・変換を行うsass:stringモジュール。 |
| SCSS記法 vs Sass記法 | 波括弧・セミコロンのSCSS構文とインデントのみのSass構文の比較。 |
| ソースマップ（.css.map） | コンパイル後のCSSを元のSCSSに対応付けるデバッグ支援ファイル。 |
| @useディレクティブ（モジュール読み込み） | 名前空間付きでモジュールを読み込む@importの後継ディレクティブ。 |
| Sass変数（$変数） | $変数で色・サイズなどを格納してスタイル全体で再利用する。 |
| @whileループ（条件付き反復） | 条件式が真の間スタイルを繰り返し出力する@while。 |
シェアする