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.
![](https://assets.edu.lat/sass/images/sass_control_directives_expressions/sass_control_directives_expressions_if_function.jpg)