Fonction Sass - if ()

La description

En fonction de la condition, cette fonction if () intégrée ne renvoie qu'un seul résultat parmi deux résultats possibles. Le résultat de la fonction peut être référencé à la variable qui peut ne pas être définie ou pour avoir d'autres calculs.

Syntaxe

if( expression, value1, value2 )

Exemple

L'exemple suivant illustre l'utilisation de la fonction if () dans le fichier 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>

Ensuite, créez le fichier style.scss .

style.scss

h2 {
   color: if( 1 + 1 == 2 , green , red);
}

Vous pouvez dire à SASS de regarder le fichier et de mettre à jour le CSS chaque fois que le fichier SASS change, en utilisant la commande suivante -

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

Ensuite, exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

h2 {
   color: green; 
}

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

Enregistrez le code html ci-dessus dans le fichier if_function.html .
Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.

↰ Previous page