Foundation - Sass-Funktionen

Foundation bietet eine Reihe von SASS-Dienstprogrammfunktionen, die mit util , color , selector , unit , value und vielen mehr verwendet werden können.

Sie können alle Dienstprogrammdateien gleichzeitig importieren, indem Sie die folgende Codezeile verwenden:

@import 'util/util';

Sie können auch einzelne Dienstprogrammdateien wie unten gezeigt importieren -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass Referenz

Sie können die Stile der Komponenten mithilfe der folgenden SASS-Funktionen ändern.

Vordergrund

Es liefert den Elementen die Vordergrundfarbe basierend auf der Hintergrundfarbe. Es verwendet das folgende Format zum Zuweisen verschiedener Arten von Parametern:

foreground($color, $yes, $no, $threshold)

Die obigen Parameter sind in der folgenden Tabelle angegeben -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$color Es überprüft die Helligkeit der Farbe.	Farbe	Keiner
2	$yes Wenn die Farbe hell ist, gibt sie $ yes zurück .	Farbe	$ schwarz
3	$no Wenn die Farbe dunkel ist, wird $ no color zurückgegeben.	Farbe	$ weiß
4	$threshold Es repräsentiert die Schwelle der Helligkeit.	Prozentsatz	60%

Smart-Scale

Es bietet den Elementen entsprechend ihrer Helligkeit eine geeignete Farbe. Es verwendet das folgende Format zur Angabe der entsprechenden Farbe:

smart-scale($color, $scale, $threshold)

Die oben angegebenen Parameter sind in der folgenden Tabelle angegeben -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$color Es wird verwendet, um die Farbe zu skalieren.	Farbe	Keiner
2	$scale Es gibt den Prozentsatz an, der vergrößert oder verkleinert werden soll.	Prozentsatz	5%
3	$threshold Es repräsentiert die Schwelle der Helligkeit.	Prozentsatz	40%

Texteingaben

Bei Verwendung des Texteingabetyps wird ein Selektor erstellt. Es verwendet das folgende Format zur Angabe der Eingabetypen:

text-inputs($types)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$types Es bietet eine Reihe von Texteingabetypen zum Generieren eines Selektors.	Farbe	- -

Streifeneinheit

Es entfernt die Einheit aus dem Wert und gibt nur die Zahl zurück. Es verwendet das folgende Format, um die Einheit aus dem Wert zu entfernen:

strip-unit($num)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$num Es gibt die Nummer an, wenn Sie die Einheit aus dem Wert entfernen.	Farbe	Keiner

rem-calc

Es ändert den Pixelwert, um ihn an die Rem-Werte anzupassen. Es verwendet das folgende Format zum Konvertieren von Pixelwerten in Rem-Werte:

rem-calc($values, $base)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$values Es konvertiert die Pixelwerte in Rem-Werte und trennt sie durch Leerzeichen. Wenn Sie eine durch Kommas getrennte Liste konvertieren, schließen Sie die Liste in Klammern ein.	Nummer oder Liste	Keiner
2	$base Es liefert den Basiswert, während Pixel in Rem-Wert konvertiert werden. Wenn für die Basis ein Nullwert vorhanden ist, verwendet die Funktion die Variable $ base-font-size als Basis.	Nummer	Null

hat-Wert

Es gibt den Wert an, wenn er nicht falsch ist. Die falschen Werte umfassen null, none, 0 oder eine leere Liste. Es verwendet das folgende Format zur Angabe des Werts:

has-value($val)

Es verwendet den in der folgenden Tabelle angegebenen Parameter -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$val Es überprüft den angegebenen Wert.	Gemischt	Keiner

Get-Side

Es gibt die Seite eines Werts an und definiert die oberen / rechten / unteren / linken Werte für Auffüllen, Rand usw. Es verwendet das folgende Format zum Festlegen der Seite eines Werts -

has-value($val)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$val Es gibt die Seite eines Werts an.	Liste oder Nummer	Keiner
2	$side Es bestimmt, auf welcher Seite der Wert (oben / rechts / unten / links) zurückgegeben werden soll.	Stichwort	Keiner

get-border-value

Es bestimmt den Randwert eines Elements. Es verwendet das folgende Format zur Angabe des Randwerts:

get-border-value($val, $elem)

Es verwendet die folgenden Parameter wie in der Tabelle angegeben -

Sr.Nr.	Parameter & Beschreibung	Art	Standardwert
1	$val Es findet einen bestimmten Wert der Grenze.	Liste	Keiner
2	$elem Es wird verwendet, um die Rahmenkomponente zu extrahieren.	Stichwort	Keiner