Sass - funzione if ()

Descrizione

In base alla condizione, questa funzione incorporata if () restituisce solo un risultato da due possibili risultati. Il risultato della funzione può essere riferito alla variabile che potrebbe non essere definita o per avere ulteriori calcoli.

Sintassi

if( expression, value1, value2 )

Esempio

L'esempio seguente mostra l'uso della funzione if () nel file SCSS:

if_function.html

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>
   
   <body>
      <h2>Welcome to TutorialsPoint</h2>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

h2 {
   color: if( 1 + 1 == 2 , green , 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

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

style.css

h2 {
   color: green; 
}

Produzione

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

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

↰ Previous page