Sass - Opérations sur les nombres

La description

SASS permet des opérations mathématiques telles que l'addition, la soustraction, la multiplication et la division. Vous ne pouvez pas utiliser des unités incompatibles telles que px * px ou tout en ajoutant un nombre avec px et em conduit pour produire un CSS invalide. Par conséquent, SASS affichera une erreur si vous utilisez des unités non valides dans CSS. SASS prend en charge les opérateurs relationnels tels que <,>, <=,> = et les opérateurs d'égalité = =,! =.

Division et /

SASS permet une opération de division (/) sur les nombres comme nous le faisons en CSS normal. Vous pouvez utiliser l'opération de division (/) dans trois situations.

Si la valeur est stockée dans une variable ou renvoyée par une fonction.
Si les parenthèses sont en dehors de la liste et que la valeur est à l'intérieur, la valeur sera entourée de parenthèses.
Si la valeur fait partie de l'expression arithmétique.

Soustraction, nombres négatifs et -

En utilisant SASS, vous pouvez effectuer certaines opérations telles que la soustraction de nombres (10px - 5px), la négation d'un nombre (-5), l'opérateur de négation unaire (- $ myval) ou l'utilisation d'identifiant (font-size). Dans certains cas, ceux-ci sont utiles comme -

vous pouvez utiliser des espaces des deux côtés de - lors de la soustraction de nombres
vous pouvez utiliser un espace avant le -, mais pas après le nombre négatif ou une négation unaire
vous pouvez mettre la négation unaire entre parenthèses séparées par un espace (5px (- $ myval))

Examples are −

Il peut être utilisé dans des identificateurs tels que la taille de la police et SASS n'autorise que des identificateurs valides.
Il peut être utilisé avec deux nombres sans espace, c'est-à-dire que 10-5 est similaire à 10-5.
Il peut être utilisé comme début d'un nombre négatif (-5).
Il peut être utilisé sans tenir compte de l'espace tel que 5 - $ myval est similaire à 5 - $ myval.
Il peut être utilisé comme opérateur de négation unaire (- $ myval).

Exemple

L'exemple suivant illustre l'utilisation d'opérations numériques dans le fichier SCSS -

<html>
   <head>
      <title>Number 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">
         <p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
         <h2>Hello...Welcome to Sass</h2>
         <h3>Hello...Welcome to Sass</h3>
         <p class = "para2">Hello...Welcome to Sass</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

$size: 25px;

h2{
   font-size: $size + 5;
}

h3{
   font-size: $size / 5;
}

.para1 {
   font-size: $size * 1.5;
}

.para2 {
   font-size: $size - 10;
}

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 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

Production

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

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

↰ Previous page