Sass - Variables

La description

Les programmeurs utilisent des variables pour représenter des données, telles que des valeurs numériques, des caractères ou des adresses mémoire. L'importance des variables est que vous pouvez réutiliser les valeurs stockées dans la variable tout au long de la feuille de style.

Syntaxe

$variable_name : some value;

Les variables sont définies avec le signe dollar ($) et se terminent par un point-virgule (;) .

Exemple

L'exemple suivant illustre l'utilisation de la variable dans le fichier SCSS -

<html>
   <head>
      <title>Variables</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">
      <h1>Example using Variables</h1>
      <p>Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

$txtcolor:#008000;
$fontSize: 20px;

p{
   color:$txtcolor;
   font-size:$fontSize;
}

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

p {
   color: #008000;
   font-size: 20px;
}

Production

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

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

↰ Previous page