Fondazione - Sass Mixins

Importazione

Importa il contenuto dei mixin SASS che sono posti nel file scss / util / _mixins.scss . È possibile importare i mixin SASS utilizzando la seguente riga di codice:

@import 'util/mixins';

Riferimento Sass

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

Mixins

È possibile utilizzare i seguenti mixin per creare la struttura delle classi CSS per i componenti.

CSS-TRIANGLE

Viene utilizzato per creare frecce a discesa, punti a discesa e molti altri. Utilizza il selettore <i> & :: before </i> o <i> & :: after </i> per collegare un triangolo a un elemento esistente. Utilizza il seguente formato:

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$triangle-size Definisce la larghezza del triangolo.	Numero	Nessuna
2	$triangle-color Definisce il colore del triangolo.	Colore	Nessuna
3	$triangle-direction Definisce la direzione del triangolo come su, destra, giù o sinistra.	Parola chiave	Nessuna

HAMBURGER

Viene utilizzato per creare icone di menu con larghezza, altezza, numero di barre e colori. Utilizza il seguente formato:

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Definisce il colore dell'icona.	Colore	Nessuna
2	$color-hover Definisce il colore quando passi il mouse sull'icona.	Colore	Nessuna
3	$width Definisce la larghezza dell'icona.	Numero	Nessuna
4	$height Definisce l'altezza dell'icona.	Numero	Nessuna
5	$weight Definisce il peso delle singole barre nell'icona.	Numero	Nessuna
6	$bars Definisce il numero di barre nell'icona.	Numero	Nessuna

BACKGROUND-TRIANGLE

Viene utilizzato per specificare l'immagine di sfondo di un elemento. Utilizza il seguente formato:

@include background-triangle($color);

Utilizza il parametro come specificato nella tabella -

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$color Definisce il colore del triangolo.	Colore	$ nero

CLEARFIX

Questo mixin cancella automaticamente gli elementi figli, quindi non c'è bisogno di markup aggiuntivo. Utilizza il seguente formato:

@include clearfix;

AUTO-WIDTH

Ridimensiona automaticamente gli elementi in base al numero di elementi presenti nel contenitore. Utilizza il seguente formato:

@include auto-width($max, $elem);

Utilizza i seguenti parametri come specificato nella tabella:

Sr.No.	Parametro e descrizione	genere	Valore predefinito
1	$max Identifica il numero massimo di articoli nel contenitore.	Numero	Nessuna
2	$elem Utilizza un tag per i selettori di pari livello.	Parola chiave	li

DISABLE-MOUSE-OUTLINE

Viene utilizzato per disabilitare il contorno attorno all'elemento quando identifica l'azione di input del mouse. Utilizza il seguente formato:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Viene utilizzato per nascondere gli elementi e può essere disponibile per tastiere e altri dispositivi. Utilizza il seguente formato:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Viene utilizzato per rimuovere gli elementi invisibili e inverte l'output CSS utilizzando il mixin element-invisible () . Utilizza il seguente formato:

@include element-invisible-off;

VERTICAL-CENTER

Viene utilizzato per posizionare gli elementi centrati verticalmente all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include vertical-center;

HORIZONTAL-CENTER

Viene utilizzato per posizionare gli elementi centrati orizzontalmente all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include horizontal-center;

ABSOLUTE-CENTER

Viene utilizzato per posizionare gli elementi assolutamente centrati all'interno dell'elemento padre non statico utilizzando il seguente formato:

@include absolute-center;