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