Sass - Propiedades anidadas

Descripción

Con propiedades anidadas, puede evitar reescribir CSS varias veces. Por ejemplo, use font como espacio de nombres, que usa algunas propiedades como font-family, font-size, font-weight y font-variant. En CSS normal, debe escribir estas propiedades cada vez con un espacio de nombres. Con SASS, puede anidar las propiedades escribiendo el espacio de nombres solo una vez.

Ejemplo

El siguiente ejemplo describe el uso de propiedades anidadas en el archivo 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>

A continuación, cree el archivo style.scss .

style.scss

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

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

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

A continuación, ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en nested_properties.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page