Sass: Nested Properties

Using nested properties, you can avoid rewriting CSS multiple times. For instance, use font as namespace, which uses some properties such as font-family, font-size, font-weight and font-variant. In normal CSS, you need to write these properties every time with namespace. Using SASS, you can nest the properties by writing the namespace only once.

Example

Example of nested properties in a SCSS file:

<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>

and the style.scss file:

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

Then you tell Sass to watch the file and update the CSS when the file changes:

sass --watch my\path\style.scss:style.css

The generated style.css files is as shown below:

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

Example​

Table of Contents

Example