Sass & SCSS Style Rules Explained

What are Sass Style Rules?

CSS is built on style declarations and Sass follows the same foundation and structure. Style rules form the core of Sass and act as the main instructions for selectors. These selectors define the structure of any stylesheet in SCSS or Sass.

In this tutorial we will learn SCSS or indented Sass style rules, nesting of rules, and nested properties with clear examples.

How to Create a Style Rule in Sass?

• A style rule begins with a selector that targets an element
• Inside the rule you write properties with their values to define how the element looks or behaves
• These property value pairs control the visual design of an HTML element on a webpage

// Style rule for the main heading  
h1.main-title {  
	color: #2a73cc;  
	font-size: 32px;  
	font-weight: bold;  
	text-align: center;  
	margin-bottom: 20px;  
	letter-spacing: 1px;  
}  

// Style rule for the main heading  
h1.main-title  
	color: #2a73cc  
	font-size: 32px  
	font-weight: bold  
	text-align: center  
	margin-bottom: 20px  
	letter-spacing: 1px  

h1.main-title {  
	color: #2a73cc;  
	font-size: 32px;  
	font-weight: bold;  
	text-align: center;  
	margin-bottom: 20px;  
	letter-spacing: 1px;  
}  

Understanding Nested Style Rules in Sass

Sass allows writing style rules nested inside one another which closely follows the structure of HTML markup. This nesting makes the stylesheet easier to read and maintain. It reduces repetition and helps keep related rules grouped together. This is one of the clear advantages of SCSS or indented Sass over plain CSS.

nav {  
	color: #333;  
	ul {  
		list-style: none;  
		li {  
			display: inline-block;  
			a {  
				text-decoration: none;  
				color: #2a73cc;  
			}  
		}  
	}  
}  

nav  
	color: #333  
	ul  
		list-style: none  
		li  
			display: inline-block  
			a  
				text-decoration: none  
				color: #2a73cc  

nav {  
	color: #333;  
}  
nav ul {  
	list-style: none;  
}  
nav ul li {  
	display: inline-block;  
}  
nav ul li a {  
	text-decoration: none;  
	color: #2a73cc;  
}  

Explanation:

• nav sets the base style for navigation.
• ul removes default list styling.
• li displays items inline.
• a applies custom link styles.

Key Benefits of Using Nested Style Rules in Sass

Nesting style rules in Sass offers several practical benefits for writing and maintaining stylesheets.

• Saves time by reducing repetitive code
• Uses fewer lines compared to plain CSS
• Keeps related selectors grouped together
• Makes the structure easy to follow like HTML
• Improves readability and organization
• Minimizes errors by keeping context clear
• Helps manage complex styles more efficiently

Drawbacks of Nesting Style Rules in Sass

While nesting makes code easier to manage, it also has some clear disadvantages that developers should keep in mind.

• Over-nesting can make code difficult to read
• Produces larger compiled CSS files
• Increases unnecessary CSS selectors
• May slow down page rendering performance
• Can complicate debugging and maintenance

Nested Properties in Sass

Just like Sass allows nesting of style rules, it also supports nested properties. This feature helps avoid repetition when writing CSS properties that share the same prefix, making code cleaner and easier to maintain.

What are Nested Properties?

Many CSS properties begin with a common prefix, such as font-, margin-, or border-. Normally, you would have to repeat the prefix each time you write a declaration. Sass makes this easier by letting you nest these properties under the shared prefix, reducing redundancy and improving readability.

Here is a simple demonstration of how nested properties work in Sass and SCSS style rules:

.button {
  border: {  
    width: 2px;  
    style: solid;  
    color: #2a73cc;  
  }  
}  

.button  
  border:  
    width: 2px  
    style: solid  
    color: #2a73cc  

.button {  
  border-width: 2px;  
  border-style: solid;  
  border-color: #2a73cc;  
}  

Advantages of Using Nested Properties

Below are key benefits of using nested properties in Sass script:

• Removes repetitive prefixes in code
• Keeps related declarations grouped together
• Makes stylesheets more readable and structured
• Saves time and reduces chances of typos

Common CSS Properties You Can Nest

The following table lists some common property prefixes that work well with nesting in Sass. For a full reference, see the complete list of CSS properties.

Using nested properties in Sass streamlines your stylesheet by combining related declarations under one block, making the code shorter, cleaner, and more efficient to manage.