Sass - DataTypes

Tipi di dati

Il tipo di dati è un tipo di informazione, che richiede la dichiarazione del tipo di dati per ogni oggetto dati. La tabella seguente mostra vari tipi di dati supportati da SassScript:

S.No.	Tipo di dati e descrizione	Esempio
1	Numbers Rappresenta i tipi interi.	2, 10.5
2	Strings È una sequenza di caratteri definita tra virgolette singole o doppie.	"Tutorialspoint", "Tutorialspoint"
3	Colors Viene utilizzato per definire il valore del colore.	rosso, # 008000, rgb (25,255,204)
4	Booleans Restituisce tipi booleani vero o falso.	10> 9 specifica vero
5	Nulls Specifica un valore nullo che è un dato sconosciuto.	if (val == null) {// statements}
6	Space and Comma Rappresenta i valori separati da spazi o virgole.	1px solido #eeeeee, 0 0 0 1px
7	Mapping Mappa da un valore a un altro valore.	FirsyKey: frstvalue, SecondKey: secvalue

stringhe

Le stringhe sono serie di caratteri, rappresentati tra virgolette singole o doppie. Le stringhe definite con virgolette singole o doppie verranno visualizzate come valore stringa non quotato utilizzando#{ } interpolazione (è un modo di utilizzare le variabili nei selettori).

Esempio

L'esempio seguente mostra l'uso delle stringhe nel file SCSS:

<html>
   <head>
      <title>Strings</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

p.tutorialspoint {
   color: blue;
}

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in strings.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Liste

Gli elenchi specificano più valori separati da spazi o virgole. Anche un singolo valore è considerato come un elenco.

SASS utilizza alcune delle funzioni di elenco come:

nth function - Fornisce un elemento specifico della lista.
join function - Unisce più elenchi in uno.
append function - Aggiunge l'elemento all'altra estremità dell'elenco.
@each directive - Fornisce stili per ogni elemento nell'elenco.

Ad esempio, considera che esistono due tipi di elenco; il primo elenco contiene i seguenti valori separati da virgola.

10px 11px, 15px 16px

Se l'elenco interno e l'elenco esterno hanno lo stesso separatore, è possibile utilizzare le parentesi per specificare dove inizieranno e finiranno entrambi gli elenchi. È possibile specificare questi elenchi come mostrato di seguito:

{10px 11px} {15px 16px}

Mappe

Le mappe sono una combinazione di chiavi e valori in cui le chiavi vengono utilizzate per rappresentare i valori. Le mappe definiscono i valori in gruppi e sono accessibili dinamicamente. Puoi scrivere un'espressione di mappa come:

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

Utilizza alcune delle funzioni come:

map-get - Fornisce i valori della mappa.
map-merge - Aggiunge valori alla mappa.
@each directive - Specifica gli stili per la coppia chiave / valore nella mappa.

Le mappe rappresentano coppie chiave / valore vuote come ( ) senza elementi e utilizza l'estensione inspect ($value) funzione per visualizzare l'output per le mappe.

Colori

Viene utilizzato per definire il valore del colore SassScript. Ad esempio, se stai usando il codice colore # ffa500 , verrà visualizzato come colore arancione in modalità compressa. SASS fornisce lo stesso formato di output digitato nelle altre modalità di output, che diventa una sintassi non valida quando un colore viene interpolato in un selettore. Per risolvere questo problema, usa i nomi dei colori tra virgolette.

↰ Previous page