Sass - Proprietà annidate

Descrizione

Utilizzando proprietà nidificate, puoi evitare di riscrivere CSS più volte. Ad esempio, usa il carattere come spazio dei nomi, che utilizza alcune proprietà come famiglia di caratteri, dimensione del carattere, spessore del carattere e variante del carattere. Nel normale CSS, è necessario scrivere queste proprietà ogni volta con lo spazio dei nomi. Utilizzando SASS, è possibile nidificare le proprietà scrivendo lo spazio dei nomi una sola volta.

Esempio

Il seguente esempio descrive l'uso di proprietà nidificate nel file 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>

Quindi, crea il file style.scss .

style.scss

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

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

Salva il codice html sopra indicato in nested_properties.html file.
Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

↰ Previous page