Sass - Sintassi

In questo capitolo studieremo il SASS Syntax. SASS supporta due sintassi e cioèSCSS e Indented syntax.

Il SCSS (Sassy CSS)è un'estensione della sintassi CSS. Ciò significa che ogni CSS valido è anche un SCSS valido. SCSS semplifica notevolmente la gestione di fogli di stile di grandi dimensioni e può riconoscere la sintassi specifica del fornitore, molti file CSS e SCSS utilizzano l'estensione.scss.
Indented - Questa è una sintassi precedente e talvolta viene chiamata semplicemente come SASS. Usando questa forma di sintassi, i CSS possono essere scritti in modo conciso. I file SASS utilizzano l'estensione.sass.

Sintassi rientrata SASS

SASS La sintassi rientrata o semplicemente SASS è un'alternativa alla sintassi SCSS basata su CSS.

Utilizza il rientro anziché{ e } per delimitare i blocchi.
Per separare le istruzioni, utilizza le nuove righe anziché il punto e virgola (;) .
La dichiarazione di proprietà e i selettori devono essere posizionati sulla propria riga e le istruzioni all'interno{ e }deve essere posizionato su una nuova riga e rientrato .

Ad esempio, considera il seguente codice SCSS:

.myclass {
   color = red;
   font-size = 0.2em;
}

Il indentedla sintassi è una sintassi precedente, che non è consigliata per l'uso nei nuovi file Sass. Se utilizzi questo file, verrà visualizzato un errore nel file CSS come abbiamo utilizzato= invece di impostare proprietà e variabili.

Compilare il codice sopra indicato utilizzando il seguente comando:

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

Quindi, esegui il comando precedente; mostrerà un errore nel file style.css come mostrato di seguito -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Differenze di sintassi di SASS

La maggior parte delle sintassi CSS e SCSS funzionano perfettamente in SASS. Tuttavia, ci sono alcune differenze, che sono spiegate nelle sezioni seguenti:

Sintassi delle proprietà

Le proprietà CSS possono essere dichiarate in due modi:

Le proprietà possono essere dichiarate simili ai CSS ma senza semicolon(;).
colon(:) sarà anteposto a ogni nome di proprietà.

Ad esempio, puoi scrivere come:

.myclass
   :color red
   :font-size 0.2em

Per impostazione predefinita, possono essere utilizzati entrambi i metodi precedenti (dichiarazione delle proprietà senza punto e virgola e due punti con prefisso al nome della proprietà). Tuttavia, solo una sintassi della proprietà può essere specificata quando si utilizza l' opzione : property_syntax .

Selettori multilinea

Nella sintassi Rientrata, i selettori possono essere posizionati su una nuova riga ogni volta che compaiono dopo commas.

Esempio

L'esempio seguente descrive l'uso di selettori multilinea nel file SCSS:

<html>
   <head>
      <title>Multiline Selectors</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>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Quindi, crea il file style.scss . Nota l' estensione .scss .

style.scss

.class1,
.class2{
   color:red;
}

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

Quindi, esegui il comando sopra indicato, creerà automaticamente il file style.css con il seguente codice:

Lo style.css generato è come mostrato di seguito -

style.css

.class1,
.class2 {
   color: red;
}

Produzione

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

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

Commenti

I commenti occupano un'intera riga e racchiudono tutto il testo annidato sotto di essi. Sono basati su righe con sintassi rientrata. Per ulteriori informazioni sui commenti, fare riferimento a questo collegamento .

@importare

In SASS il @importla direttiva può essere scritta con / senza virgolette. A differenza di SCSS, devono essere utilizzati tra virgolette.

Ad esempio, in SCSS il @import direttiva può essere usata come -

@import "themes/blackforest";
@import "style.sass";

Questo può essere scritto in SASS come -

@import themes/blackforest
@import fontstyle.sass

Direttive Mixin

SASS supporta la scorciatoia per direttive come @mixin e @include. Invece di@mixin e @include Puoi usare = e + caratteri, che richiedono meno battitura e rendono il codice più semplice e più facile da leggere.

Ad esempio, puoi scrivere le direttive mixin come -

=myclass
   font-size: 12px;
p
   +myclass

Il codice sopra indicato è lo stesso di -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Sintassi deprecata

SASS supporta l'uso di una vecchia sintassi. Tuttavia, l'utilizzo di questa sintassi in SASS ènot recommended. Se si utilizza questa sintassi verrà visualizzato un avviso che verrà rimosso nelle versioni successive. Alcune delle vecchie sintassi sono mostrate nella tabella seguente.

S. No.	Operatore e descrizione
1	= È stato utilizzato al posto di: quando si impostano variabili e proprietà sui valori di SassScript.
2	\|\|= È stato utilizzato al posto di: ogni volta che si assegna il valore predefinito di una variabile.
3	! Invece di $,! è stato utilizzato come prefisso di variabile. La funzionalità non verrà modificata quando viene utilizzata al posto di $.

↰ Previous page Next page ↱