それぞれの例は編集可能です。書き換えて「実行」を押すと、変換ハブと同じ本物のSassエンジンで再コンパイルされます。
下の「実行」ボタンで実際にコンパイルを試せるインタラクティブな例は、それぞれ次のような機能を扱っています。
$変数名: 値;で値に名前を付けて使い回せます。色やスペーシングなど、何度も登場する値を1箇所で管理できるのが最大のメリットです。値を変える時も、変数の定義を1行変えるだけで全体に反映されます。
lighten() / darken()で明度を、saturate() / desaturate()で彩度を調整できます。mix()は2色を指定した比率で混ぜ、rgba()は既存の色に透明度を追加します。ベースカラーから派生色を自動生成できるので、hoverやactive状態の色を手打ちしなくて済みます。
渡された引数によって出力するスタイルを切り替えられます。似たようなクラスを何個も書く代わりに、1つのmixinに条件分岐を持たせて呼び出し側で出し分けられます。
マップ（キーと値のペア）をループして、複数のクラスをまとめて生成できます。色の一覧やブレークポイントの一覧など、リスト状のデータからルールを量産する時に便利です。
指定した回数だけループして、番号付きのクラスを生成します。スペーシングのスケール（mt-1, mt-2...）のような、連番のユーティリティを手で書かずに済みます。
複数のCSSプロパティをひとまとめにして再利用できます。引数にデフォルト値を持たせておけば、呼び出し側で省略した時の挙動も指定できます。
%名前で「単体では出力されないルール」を定義し、@extendで継承します。mixinと違い、継承元のセレクタがまとめられるため、似たルールを持つクラスが多い時にCSSの出力量を抑えられます。
@use / @forward のような新しいモジュールシステムは libsass では未対応のため、このページでは扱っていません（@importベースの従来方式で解説しています）。@変数名）や一部の関数名が異なりますが、考え方はSCSSとほぼ共通です。このページはSCSS表記で統一しています。color / background 系の宣言を抽出して表示する簡易的なものです。