Fondazione - Funzioni Sass

Foundation fornisce una serie di funzioni di utilità SASS, che possono essere utilizzate con util , color , selector , unit , value e molte altre.

È possibile importare tutti i file di utilità contemporaneamente utilizzando la seguente riga di codice:

@import 'util/util';

È inoltre possibile importare singoli file di utilità come mostrato di seguito:

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

Riferimento Sass

È possibile modificare gli stili dei componenti utilizzando le seguenti funzioni SASS.

primo piano

Fornisce il colore di primo piano agli elementi in base al colore di sfondo. Utilizza il seguente formato per assegnare diversi tipi di parametri:

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

I parametri di cui sopra sono specificati nella seguente tabella -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Controlla la luminosità del colore.	Colore	Nessuna
2	$yes Se il colore è chiaro, restituisce $ yes color.	Colore	$ nero
3	$no Se il colore è scuro, restituisce $ no color.	Colore	$ bianco
4	$threshold Rappresenta la soglia della leggerezza.	Percentuale	60%

scala intelligente

Fornisce colore appropriato per gli elementi in base alla sua leggerezza. Utilizza il seguente formato per specificare il colore appropriato:

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

I parametri sopra indicati sono specificati nella tabella seguente:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color È usato per ridimensionare il colore.	Colore	Nessuna
2	$scale Specifica la percentuale da aumentare o diminuire.	Percentuale	5%
3	$threshold Rappresenta la soglia della leggerezza.	Percentuale	40%

input di testo

Crea un selettore durante l'utilizzo del tipo di input di testo. Utilizza il seguente formato per specificare i tipi di input:

text-inputs($types)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$types Fornisce una serie di tipi di input di testo per generare un selettore.	Colore	-

strip-unit

Rimuove l'unità dal valore e restituisce solo il numero. Utilizza il seguente formato per rimuovere l'unità dal valore:

strip-unit($num)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$num Specifica il numero quando si rimuove l'unità dal valore.	Colore	Nessuna

rem-calc

Modifica il valore del pixel in modo che corrisponda ai valori rem. Utilizza il seguente formato per convertire i valori dei pixel in valori rem:

rem-calc($values, $base)

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$values Converte i valori dei pixel in valori rem e li separa utilizzando gli spazi. Se stai convertendo un elenco separato da virgole, avvolgi l'elenco tra parentesi.	Numero o elenco	Nessuna
2	$base Fornisce il valore di base durante la conversione del pixel in valore rem. Se è presente un valore nullo per la base, la funzione utilizza la variabile $ base-font-size come base.	Numero	nullo

ha valore

Specifica il valore se non è falso. I valori falsi includono null, nessuno, 0 o un elenco vuoto. Utilizza il seguente formato per specificare il valore:

has-value($val)

Utilizza il parametro come specificato nella tabella seguente -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Controlla il valore specificato.	Misto	Nessuna

get-side

Specifica il lato di un valore e definisce i valori superiore / destro / inferiore / sinistro su riempimento, margine, ecc. Utilizza il seguente formato per specificare il lato di un valore:

has-value($val)

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Specifica il lato di un valore.	Elenco o numero	Nessuna
2	$side Determina su quale lato deve tornare il valore (in alto / a destra / in basso / a sinistra).	Parola chiave	Nessuna

get-border-value

Determina il valore del bordo di un elemento. Utilizza il seguente formato per specificare il valore del bordo:

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

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$val Trova un valore specifico del confine.	Elenco	Nessuna
2	$elem Viene utilizzato per estrarre il componente bordo.	Parola chiave	Nessuna