Sassの関数と制御フロー
Sass組み込み関数、@if、@each、@forディレクティブを使って、動的なCSSロジックを記述します。
「Sassの関数と制御フロー」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Sass の組み込み関数
Sass には、色の操作、数学的な計算、文字列操作などに使える多くの組み込み関数があります。これらはコンパイル時に実行されます。
<div class="darker">darken($base, 15%)</div>
<div class="lighter">lighten($base, 15%)</div>
<div class="faded">transparentize($base, 0.5)</div>
<div class="mixed">mix($base, white, 60%)</div>
色の関数
主な Sass の色関数：
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
@function によるカスタム関数
値を返す（CSS ルールは出力しない）再利用可能な関数を定義します：
<h2 class="heading">Heading (2rem)</h2>
<p class="body">Body text (1.125rem)</p>
@if @else による制御フロー
変数の値に基づいて条件付きで CSS を出力します：
<p class="text-large">Large text variant</p>
<p class="text-small">Small text variant</p>
<p class="text-default">Default text variant</p>
@each ループ
リストまたはマップを反復処理して、複数のルールを生成します：
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-success">Success</button>
@for ループ
値の範囲に対して CSS を生成します：
<div class="col-1">col-1 (20%)</div>
<div class="col-2">col-2 (40%)</div>
<div class="col-3">col-3 (60%)</div>
<div class="col-4">col-4 (80%)</div>
<div class="col-5">col-5 (100%)</div>
@while ループ
条件が真である間、ループします。@each と @for でほとんどのケースに対応できるため、使用は控えめにしてください：
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
Sass マップ
マップは Sass におけるキーと値のデータ構造です：
<div class="box">Responsive box (resize wider than 768px to see color change)</div>
@error @warn @debug
Sass には 3 つの診断用関数があります：
@error：メッセージを表示してコンパイルを停止します@warn：コンパイルを停止せずに警告を記録します@debug：開発中に値を記録します
補間 #{...}
#{$variable} を使用すると、セレクター、プロパティ名、メディアクエリに変数の値を挿入できます：
<p class="element">Interpolated property (#{$property})</p>
クイックチェック
Sass の @mixin と Sass の @function の違いは何ですか？
まとめ
Sass の組み込みカラー関数（darken、lighten、mix）を使うと、コンパイル時に色を操作できます。カスタム @function は計算結果を返します。@if/@else によって条件付きの出力を追加できます。@each はリストやマップを反復処理します。@for は数値範囲を反復処理します。これらの機能により、重複を最小限に抑えた、強力で DRY なスタイルシートを作成できます。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「Sassの関数と制御フロー」レッスンは無料ですか？
はい。「Sassの関数と制御フロー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Sassの関数と制御フロー」で何を学びますか？
Sass組み込み関数、@if、@each、@forディレクティブを使って、動的なCSSロジックを記述します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Sassの関数と制御フロー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 変数、ネスト、パーシャル
- ミックスインとインクルード
- Extendとプレースホルダーセレクター
- Sassの関数と制御フロー