- Sass Tutorial
- Sass - Home
- Sass - Overview
- Sass - Installation
- Sass - Syntax
- Using Sass
- Sass - CSS Extensions
- Sass - Comments
- Sass - Script
- Sass - @-Rules and Directives
- Control Directives & Expressions
- Sass - Mixin Directives
- Sass - Function Directives
- Sass - Output Style
- Extending Sass
- Sass Useful Resources
- Sass - Interview Questions
- Sass - Quick Guide
- Sass - Useful Resources
- Sass - Discussion
Sass - Nested Properties
Description
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
The following example describes the use of nested properties in the 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>
Next, create file style.scss.
style.scss
.line { font: { family: Lucida Sans Unicode; size:20px; weight: bold; variant: small-caps; } }
You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −
sass --watch C:\ruby\lib\sass\style.scss:style.css
Next, execute the above command; it will create the style.css file automatically with the following code −
style.css
.line { font-family: Lucida Sans Unicode; font-size: 20px; font-weight: bold; font-variant: small-caps; }
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code in nested_properties.html file.
Open this HTML file in a browser, an output is displayed as shown below.