Sass - Propriétés imbriquées

La description

En utilisant des propriétés imbriquées, vous pouvez éviter de réécrire le CSS plusieurs fois. Par exemple, utilisez la police comme espace de noms, qui utilise certaines propriétés telles que font-family, font-size, font-weight et font-variant. En CSS normal, vous devez écrire ces propriétés à chaque fois avec un espace de noms. En utilisant SASS, vous pouvez imbriquer les propriétés en écrivant l'espace de noms une seule fois.

Exemple

L'exemple suivant décrit l'utilisation de propriétés imbriquées dans le fichier SCSS -

<html>
   <head>
      <title>Nested Properties</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 Nested Properties</h1>
         <p class = "line">SASS stands for Syntactically Awesome Stylesheet</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.scss .

style.scss

.line {
   font: {
      family: Lucida Sans Unicode;
      size:20px;
      weight: bold;
      variant: small-caps;
   }
}

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

.line {
   font-family: Lucida Sans Unicode;
   font-size: 20px;
   font-weight: bold;
   font-variant: small-caps;
}

Production

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

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

↰ Previous page