Heim >Web-Frontend >CSS-Tutorial >Sass-Funktionen, um Ihre Style-Laken zu starten
Dieser Artikel wurde ursprünglich am 11. November 2014 veröffentlicht und aktualisiert.
Sass verfügt über eine Reihe integrierter Funktionen, mit denen Sie Ihren Styling-Workflow optimieren können. Lassen Sie uns einige wichtige Beispiele untersuchen.
Schlüsselhighlights
darken
können die Farbsättigung um einen Prozentsatz anpassen, während lighten
und opacify
die Farbendeckkraft kontrollieren. Dies sorgt dafür
transparentize
Die complement
percentage
SASS bietet eine Inline -Funktion if
, , darken
, lighten
opacify
transparentize
Die Funktionen
sind wohl die bekannteste. Sie passen die Farbleichtigkeit an einen bestimmten Prozentsatz an: darken
lighten
<code class="language-scss">$main-color: #6dcff6; $darker-color: darken($main-color, 20%); $lighter-color: lighten($main-color, 20%);</code>
kompiliert:
<code class="language-scss">.brand-button { background: $main-color; } .brand-button:hover { background: $lighter-color; } .brand-button:visited { background: $darker-color; }</code>
Dieser Ansatz behält die Farbkonsistenz in Ihrem Projekt bei. Ein einzelner
<code class="language-css">.brand-button { background: #6dcff6; } .brand-button:hover { background: #cdeffc; } .brand-button:visited { background: #0fafee; }</code>-Veränderungen propagiert sich überall.
$main-color
In ähnlicher Weise
Kontrolle der Farbendeckigkeit unter Verwendung von Dezimalwerten (0-1): 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>und
ein effizientes, konsistentes Styling. darken
und lighten
sind Aliase für fade-in
und fade-out
. opacify
transparentize
und complement
percentage
Die
complement
<code class="language-scss">$main-color: #6dcff6; $call-to-action: complement($main-color); // Returns #f6946d</code>umwandelt Zahlen in Prozentsätze und vereinfacht die Berechnungen:
percentage
<code class="language-scss">width: percentage(0.16); // Returns 16% width: percentage(100px / 50px); // Returns 200%</code>
Bedingte Logik: Die
Funktion if
Sass's Inline
<code class="language-scss">$main-color: #6dcff6; $darker-color: darken($main-color, 20%); $lighter-color: lighten($main-color, 20%);</code>
Es dauert eine Erkrankung und zwei potenzielle Ausgänge. Dies ist von unschätzbarem Wert für reaktionsschnelles Design und ermöglicht die Anpassung von Eigenschaften anhand von variablen Bedingungen oder Bildschirmgrößen.
Schlussfolgerung
Die integrierten Funktionen vonSass verbessern die Stylingeffizienz erheblich. Diese Beispiele bieten zusammen mit anderen (und denjenigen, die mit Compass verfügbar sind) ein leistungsstarkes Toolkit für die Erstellung von Wartungs- und anpassbaren Stylesheets. Experimentieren Sie, um den Workflow zu finden, der Ihrem Projekt am besten entspricht.
Häufig gestellte Fragen zu SASS -Funktionen
Dieser Abschnitt wurde für die Kürze weggelassen, da es sich um ein separates Thema handelt und die Länge dieser bereits erheblichen Reaktion erheblich erhöhen würde. Die früher bereitgestellten Informationen befassen sich jedoch direkt mit vielen der Fragen, die im FAQ -Abschnitt der ursprünglichen Eingabe gestellt wurden.
Das obige ist der detaillierte Inhalt vonSass-Funktionen, um Ihre Style-Laken zu starten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!