SASSは、スタイルシートをキックスタートするように機能します

この記事は元々2014年11月11日に公開され、更新されました。 SASSは、スタイリングワークフローを合理化するために設計された一連の組み込み関数を誇っています。いくつかの重要な例を調べてみましょう。

キーハイライト

SASSの組み込み関数は、スタイルの開発を劇的に加速します。

や
• などの関数は、色の飽和度をパーセンテージで調整しますが、darkenおよびlightenを制御する色の不透明度を調整します。これにより、中程度のプロジェクトブランドの色の変更があっても、カラーパレットの一貫性が保証されます。 opacifytransparentize関数は対照的な色を生成し、視覚的に印象的な呼びかけを作成するのに理想的です。
関数は数値をパーセンテージに変換し、タイポグラフィとレスポンシブの調整を簡素化します。 SASSは、他の言語の3成分演算子に似たインライン
• 関数を提供します。これにより、画面サイズまたはその他の動的変数に基づいてプロパティが適応するレスポンシブデザインに特に有益な可変依存スタイリングが可能になります。 complement percentage
色の操作：
• 、if、
、

darkenlightenおよびopacify関数は、間違いなく最もよく知られています。それらは、指定された割合で色の明るさを調整します：transparentize これにより、わずかに変更された色合いの16進コードを手動で決定する必要性がなくなります。 たとえば、

darkenにコンパイル：lighten

<code class="language-scss">$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);</code>

このアプローチは、プロジェクト全体で色の一貫性を維持します。 単一の

変更は、全体に伝播します。

同様に、10進数（0-1）を使用した

<code class="language-scss">.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}</code>

および

を制御色の不透明度：

<code class="language-css">.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}</code>

モーダルやオーバーレイに役立つこれらの機能は、$main-colorや

など、効率的で一貫したスタイリングを促進します。

およびopacifyはtransparentizeおよび

。

<code class="language-scss">$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);</code>

のエイリアスです

darkenコントラストと変換：lightenおよびfade-in fade-out opacify transparentize

関数は相補的な色を返します。

complement関数は数値をパーセンテージに変換し、計算を簡素化します：percentage

この関数はユニットを優雅に処理し、タイポグラフィまたはレスポンシブスケーリングに最適です。

complement条件論的ロジック：

function

<code class="language-scss">$main-color: #6dcff6;
$call-to-action: complement($main-color); // Returns #f6946d</code>

percentageSASSのインライン

関数は、三元演算子をミラーリングします：

<code class="language-scss">width: percentage(0.16); // Returns 16%
width: percentage(100px / 50px); // Returns 200%</code>

<code class="language-scss">$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);</code>

条件と2つの潜在的な出力が必要です。 これは、レスポンシブデザインにとって非常に貴重であり、さまざまな条件または画面サイズに基づいてプロパティが適応できるようにします。

結論

SASSの組み込み機能により、スタイリング効率が大幅に向上します。 これらの例は、他の例（およびコンパスで入手可能）とともに、保守可能で適応性のあるスタイルシートを作成するための強力なツールキットを提供します。 プロジェクトのニーズに最適なワークフローを見つけるために実験してください。

sass関数に関するよくある質問

このセクションは、別のトピックであり、この既に実質的な応答の長さを大幅に増加させるため、簡潔に省略されています。 ただし、以前に提供された情報は、元の入力のFAQセクションで提起された多くの質問に直接対処しています。

以上がSASSは、スタイルシートをキックスタートするように機能しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。