Sass - Types de données

Types de données

Le type de données est un type d'informations, qui nécessite la déclaration d'un type de données pour chaque objet de données. Le tableau suivant présente différents types de données pris en charge par SassScript -

S.No.	Type de données et description	Exemple
1	Numbers Il représente des types entiers.	2, 10,5
2	Strings Il s'agit d'une séquence de caractères définie entre guillemets simples ou doubles.	'Tutorialspoint', "Tutorialspoint"
3	Colors Il est utilisé pour définir la valeur de couleur.	rouge, # 008000, rgb (25255204)
4	Booleans Il renvoie des types booléens vrai ou faux.	10> 9 spécifie vrai
5	Nulls Il spécifie une valeur nulle qui est une donnée inconnue.	if (val == null) {// instructions}
6	Space and Comma Représente les valeurs séparées par des espaces ou des virgules.	1px solide #eeeeee, 0 0 0 1px
sept	Mapping Il mappe d'une valeur à une autre valeur.	FirsyKey: frstvalue, SecondKey: secvalue

Cordes

Les chaînes sont des séries de caractères représentés entre guillemets simples ou doubles. Les chaînes définies avec des guillemets simples ou des guillemets doubles seront affichées en tant que valeur de chaîne sans guillemets en utilisant#{ } interpolation (c'est une manière d'utiliser des variables dans les sélecteurs).

Exemple

L'exemple suivant illustre l'utilisation de chaînes dans le fichier SCSS -

<html>
   <head>
      <title>Strings</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">
         <h2>Example using Strings</h2>
         <p class = "tutorialspoint">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

$name: "tutorialspoint";

p.#{$name} {
   color: blue;
}

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.tutorialspoint {
   color: blue;
}

Production

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

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

Listes

Les listes spécifient plusieurs valeurs séparées par des espaces ou des virgules. Même une valeur unique est considérée comme une liste.

SASS utilise certaines des fonctions de liste telles que -

nth function - Il fournit un élément spécifique de la liste.
join function - Il joint plusieurs listes en une seule.
append function - Il ajoute l'élément à l'autre extrémité de la liste.
@each directive - Il fournit des styles pour chaque élément de la liste.

Par exemple, considérez qu'il existe deux types de liste; la première liste contient les valeurs suivantes qui sont séparées par des virgules.

10px 11px, 15px 16px

Si la liste interne et la liste externe ont le même séparateur, vous pouvez utiliser des parenthèses pour spécifier où les deux listes commenceront et s'arrêteront. Vous pouvez spécifier ces listes comme indiqué ci-dessous -

{10px 11px} {15px 16px}

Plans

Les cartes sont une combinaison de clés et de valeurs dans lesquelles les clés sont utilisées pour représenter les valeurs. Les cartes définissent les valeurs en groupes et sont accessibles de manière dynamique. Vous pouvez écrire une expression de carte comme -

$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);

Il utilise certaines des fonctions telles que -

map-get - Il fournit les valeurs de la carte.
map-merge - Il ajoute des valeurs à la carte.
@each directive - Il spécifie les styles pour la paire clé / valeur dans la carte.

Les cartes représentent des paires clé / valeur vides comme ( ) sans éléments et utilise le inspect ($value) pour afficher la sortie des cartes.

Couleurs

Il est utilisé pour définir la valeur de couleur SassScript. Par exemple, si vous utilisez un code de couleur comme # ffa500 , il s'affichera en orange en mode compressé. SASS fournit le même format de sortie que celui tapé dans les autres modes de sortie, qui devient une syntaxe invalide lorsqu'une couleur est interpolée dans un sélecteur. Pour résoudre ce problème, utilisez les noms de couleur entre guillemets.

↰ Previous page