SASS チートシート

すべてのツール

無料

検索・印刷できる Sass / SCSS リファレンス——変数、ネスト、@use モジュール、ミックスイン、関数、制御フロー、組み込みモジュール。無料。

変数

$primary: #1d6f42;

変数を宣言

$radius: 4px !default;

未定義の場合のみ設定

$theme: dark !global;

ブロック内からグローバルスコープに代入

.box { $w: 10px; width: $w; }

ローカル変数、ブロックにスコープ限定

$font-stack: 'Inter', sans-serif;

文字列/リスト値

$gap: 8px * 2;

変数は計算値を保持可能

color: $primary;

変数をプロパティ値として使用

$sizes: 4px, 8px, 16px;

カンマ区切りのリスト変数

$config: ('gap': 8px);

マップ変数(キー/値ペア)

$on: true;

制御フロー用の真偽値変数

ネスト

.card { .title { color: red; } }

セレクタを親の内側にネスト

.btn { &:hover { opacity: .8; } }

&は親セレクタを指す

.btn { &.is-active {} }

&による複合親セレクタ

.list { & + & { margin-top: 8px; } }

&を使った隣接兄弟ルール

.menu { .dark & { color: #fff; } }

&を末尾に置きコンテキストを前置

.box { font: { size: 14px; weight: 700; } }

名前空間のネストプロパティ (font-*)

.grid { > .col {} }

ネストした子結合子

@media (min-width: 768px) { .col { width: 50%; } }

メディアクエリもルール内にネスト

.a { color: red; .b & { color: blue; } }

&の移動でコンテキストを並べ替え

パーシャルとモジュール

_base.scss

パーシャルファイル(先頭_、単独ではコンパイルされない)

@use 'base';

モジュールを読み込み(ファイル名で名前空間化)

base.$primary;

名前空間経由でメンバーにアクセス

@use 'base' as b;

カスタム名前空間でモジュールを読み込み

@use 'base' as *;

グローバル名前空間に読み込み(接頭辞なし)

@use 'theme' with ($primary: #000);

読み込み時にモジュールの!default変数を設定

@forward 'buttons';

エントリーポイントからモジュールを再エクスポート

@forward 'buttons' as btn-*;

接頭辞付きでメンバーを転送

@forward 'src/list' hide list-reset;

転送するが特定メンバーを隠す

@forward 'config' with ($gap: 4px !default);

転送し設定可能なデフォルトを設定

ミックスイン

@mixin reset { margin: 0; padding: 0; }

再利用可能な宣言ブロックを定義

@include reset;

ミックスインを適用

@mixin pad($x) { padding: $x; }

引数付きミックスイン

@include pad(8px);

include時に引数を渡す

@mixin pad($x: 4px) { padding: $x; }

デフォルト値付き引数

@include pad($x: 12px);

キーワードで引数を渡す

@mixin shadow($a...) { box-shadow: $a; }

任意(可変)引数

@mixin card { border: 1px solid; @content; }

@contentブロックを受け取る

@include card { color: red; }

ミックスインの@contentにブロックを渡す

@mixin on-dark { @content; }

@content経由の任意ルールをラップ

関数

@function double($n) { @return $n * 2; }

値を返す関数を定義

width: double(8px);

カスタム関数を呼び出し

@function pad($x: 4px) { @return $x; }

デフォルト引数を持つ関数

@function sum($a, $b) { @return $a + $b; }

複数の引数

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

関数は制御フローを含められる

@use 'sass:math';

関数で使う組み込みモジュールを取り込み

@function half($n) { @return math.div($n, 2); }

自作関数内でモジュール関数を使用

@function list-len($l) { @return list.length($l); }

関数は組み込みをラップ可能

margin: sum(4px, 8px);

返り値をプロパティ値として使用

演算子と数学

@use 'sass:math';

除算用にmathモジュールを読み込み

width: math.div(100%, 3);

除算 (非推奨の/でなくmath.div)

width: 100% - 20px;

減算

margin: 4px + 4px;

加算

width: 2 * 8px;

乗算

$r: 10 % 3;

剰余

@if $a == $b {}

等値比較

@if $a >= 768px {}

以上の比較

@if $a and $b {}

論理積

@if not $disabled {}

論理否定

制御フロー

@if $on { display: block; }

条件ブロック

@else if $alt { display: flex; }

追加の条件

@else { display: none; }

フォールバック分岐

@each $c in red, green, blue {}

リストを反復

@each $name, $val in $map {}

マップのキーと値を反復

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

マップからルールを生成

@for $i from 1 through 3 {}

終了値を含むループ

@for $i from 0 to 3 {}

終了値を含まないループ

@while $i > 0 { $i: $i - 1; }

条件が真の間ループ

組み込みモジュール

@use 'sass:math'; math.floor(4.7)

最も近い整数に切り捨て

math.ceil(4.1)

最も近い整数に切り上げ

math.round(4.5)

最も近い整数に丸め

math.percentage(math.div(1, 4))

単位なし比率をパーセントに変換

@use 'sass:string'; string.to-upper-case('hi')

文字列を大文字化

string.quote(hello)

値を引用符で囲む

@use 'sass:color'; color.adjust($c, $lightness: 10%)

色チャンネルを一定量調整

color.scale($c, $lightness: 20%)

色チャンネルを滑らかにスケール

color.mix($a, $b, 50%)

2色を混合

@use 'sass:list'; list.length($l)

リスト内の項目数

list.nth($l, 1)

n番目の項目を取得(1始まり)

@use 'sass:map'; map.get($m, 'gap')

キーでマップから値を取得

map.merge($a, $b)

2つのマップを統合

map.keys($m)

マップのキー一覧を取得

プレースホルダと継承

%card { border: 1px solid; }

プレースホルダセレクタ(単独では出力されない)

.box { @extend %card; }

プレースホルダのスタイルを継承

.alert { color: red; }

拡張対象の通常セレクタ

.error { @extend .alert; }

実在するセレクタを拡張

.note { @extend .alert !optional; }

!optional: 対象が無くてもエラーにしない

%btn-base { padding: 8px; }

多数のボタンでベースを共有

.btn-primary { @extend %btn-base; }

@extendで複数セレクタが1ルールを共有

.btn-ghost { @extend %btn-base; }

各拡張は出力でグループ化される

@include card;

パラメータ化再利用には@extendよりミックスインを推奨

補間とその他

.icon-#{$name} { content: ''; }

変数をセレクタに補間

width: calc(100% - #{$gap});

calc()内にSass値を補間

content: '#{$count} items';

文字列内に補間

--bs-#{$key}: #{$val};

CSSカスタムプロパティを動的に構築

$map: ('sm': 576px, 'md': 768px);

キー/値ペアのマップを定義

map.get($map, 'md')

マップ値を取得 (sass:map経由)

@debug $value;

コンパイル中に値をコンソールに表示

@warn 'deprecated';

コンパイル時の警告を出力

@error 'invalid input';

エラーでコンパイルを中止

// inline comment

サイレントコメント(出力から除去)

/* block comment */

CSSコメント(/*! は圧縮出力でも保持)

@import 'base';

レガシーimport — 非推奨、@use / @forwardを推奨

「:q」に一致する項目はありません。

お困りですか？

このツールで問題が見つかりましたか？チームにお知らせください。

問題を報告

この無料ツールをあなたのウェブサイトに追加 — 下のコードをコピーして貼り付けてください。

<iframe src="https://tweakee.com/ja/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>