Sass - Opérations de couleur

La description

SASS permet d'utiliser des composants de couleur avec les opérations arithmétiques et toute expression de couleur renvoie une valeur de couleur SassScript.

Exemple

L'exemple suivant illustre l'utilisation des opérations de couleur dans le fichier SCSS -

<html>
   <head>
      <title>Color Operations</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">
         <h3>This is Example of Sass Color Operations</h3>
         <p>SASS stands for Syntactically Awesome Stylesheet..</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

$color1: #333399;
$color2: #CC3399;

p{
   color: $color1 + $color2;
}

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: #ff66ff;
}

Production

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

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

↰ Previous page