1. What are SASS Style Rules?
As we know, CSS programming has its basis in style declarations. Similarly, style rules are the kernel of SASS programming. These style rules are the principle guidelines for the selectors in SCSS programming. Hence, these selectors set the baseline of any stylesheet in SCSS programming. In this tutorial, we will explore SASS selectors and their nesting along with some advanced nesting principles. Also, we will study how to formulate style rules for selector lists and combinators in SASS script.
1.1. How to Create a Style Rule in SASS?
Creating a style rule in SASS is very similar to CSS language. It only takes a selector, key, and its value to define a style rule. Thus, these key-value pairs define the behavior or outlook of any HTML element on a web page. Consider the below example to understand how to declare rules in a SASS stylesheet. The below example uses the SCSS method to formulate a style rule, although there is an indented method also.
.header-text {
display: block;
font-family: 'Noto sans', sans-serif;
font-size: 24px;
font-weight: 900;
background: #f8f5fc;
color: #153966;
text-align: center;
}
2. Nested Style Rules in SASS
Since the above style rule is very similar to the CSS declaration, then what is the difference between SASS and CSS? That is where SASS speaks for itself by introducing the nested style rules. Nesting of SCSS rules makes it very efficient and far more effortless for programmers to formulate stylesheets in SASS which is very much identical to HTML markup.
Let us understand how nesting of style rules is an advantage of SASS over CSS. Consider the following instance of nesting style rules which include SCSS and indented types and finally the generated CSS output. Try navigating through the tabs to see the difference and variations in the code.
Nesting Example
$color-light: #fdfdfd;
$color-dark: #313131;
$font-family: 'Menlo Regular';
$link-color: #2a7733;
$text-size: 14px;
.sidebar-left{
h3{
color: $color-light;
background: $color-dark;
padding: 5px auto;
}
ul{
color: $color-dark;
font-size: $text-size;
font-family: $font-family;
}
a{
color: $link-color;
font-size: $text-size;
text-decoration: none;
}
}
$color-light: #fdfdfd $color-dark: #313131 $font-family: 'Menlo Regular' $link-color: #2a7733 $text-size: 14px .sidebar-left h3 color: $color-light background: $color-dark padding: 5px auto ul color: $color-dark font-size: $text-size font-family: $font-family a color: $link-color font-size: $text-size text-decoration: none
.sidebar-left h3 {
color: #fdfdfd;
background: #313131;
padding: 5px auto;
}
.sidebar-left ul {
color: #313131;
font-size: 14px;
font-family: 'Menlo Regular';
}
.sidebar-left a {
color: #2a7733;
font-size: 14px;
text-decoration: none;
}
2.1. Outcome of Rules Nesting
When we navigate through the tabs in the above instance, it is obvious that the CSS declaration, .sidebar-left class is repeated several times. Whereas in SCSS and indented type code, .sidebar-left is written once and all other declarations are nested within this rule.
2.2. Advantages of SASS Style Rules Nesting
There are certain advantages to writing nested rules in SCSS programming.
- Time-saving in declaring the rules
- Fewer lines of code to write
- Simple Logic to understand
- Fewer repetitions
- Easy to read the declarations
2.3. Disadvantages of SCSS Style Rules Nesting
Although, there are advantages of nesting in SASS style rules. However, there are certain limitations and disadvantages of writing these nested rules.
- Sometimes become very complicated
- Creates abundant CSS rules
- Generated CSS rules burden the server
- Which in turn occupies greater bandwidth
- Resultantly, the server needs to do more work
Tidbit:
Since nesting makes SASS script much easier and exciting, however, always try to keep the nested rules shallow. As the deeper nesting of rules results in overloading the browser.
3. Nested Properties in SASS Style Rules
As we have seen nesting of SCSS style rules in the earlier specimens, now is the time to comprehend the nested SASS properties. It is somehow analogous to style rules nesting.
3.1. What are Nested Properties?
Since there are a lot of CSS properties that have similar prefixes. Therefore, it is a mandatory choice to do this repetition for creating stylesheets. However, SCSS facilitates the programmers to avoid this repetition by nesting the CSS properties with identical prefixes.
3.2. List of Nested Properties
Below are some of the CSS properties which have the same prefix and therefore, we can apply the SASS nesting technique to generate the style declarations.
- align- prefix
- animation- prefix
- background- prefix
- border- prefix
- flex- prefix
- font- prefix
- list- prefix
- margin- prefix
- padding- prefix
- text- prefix
- transition- prefix
- word- prefix
The below example will explore the nesting of SASS properties entirely.
Properties Nesting
background:{
color: #f8f9fa;
image: url(“background-image.jpg”);
repeat: repeat-x;
attachment: scroll;
}
text:{
align: left;
decoration: none;
shadow: 0 0 2px #000;
}
The above SCSS rules will formulate the below css declaration upon parsing.
some-selector{
background-color: #f8f9fa;
background-image: url(“background-image.jpg”);
background-repeat: repeat-x;
background-attachment: scroll;
}
some-selector{
text-align: left;
text-decoration: none;
text-shadow: 0 0 2px #000;
}
3.3. Outcome of Properties Nesting
The above illustration clarifies the behavior of nested SASS properties. This is how we can take advantage of nesting while writing SASS code for our projects. The prefix's background and text take all the required properties and values parameters within curly braces. However, in the SCSS case, the properties will only have suffix with them within the braces. Hence, reducing the repetition and making the life of coders a way easier.
4. Selectors of Style Rules
Since we do write CSS declarations using selectors in our stylesheets. In a similar way, the selectors help in writing style rules for SASS stylesheets. Basically, selectors are the blocks, which hold some key declarations which are particular to that specific selector.
In SCSS style rules, any word that is written outside and at the start of the parenthesis selector {...} is a selector. This SASS selector and the properties within braces combine to form a style rule.
4.1. SASS Selectors Lists
In SCSS programming, it is possible to write similar declarations for a group of selectors. However, while writing CSS declarations, we have to repeat the selectors combinations or lists. But in SASS case, the selectors lists i.e. (comma-separated selectors) are iterated in a systematic way, when we have to write nested rules. Check the following instance and then we will discuss this in detail.
Selectors Nesting
.main-content, .sidebar{
p, ul {
font-size: 16px;
line-height: 1.6;
font-family: sans-serif;
}
}
The CSS equivalent code of above style rule is below.
.main-content p,.main-content ul, .sidebar p, .sidebar ul{
font-size: 16px;
line-height: 1.6;
font-family: sans-serif;
}
4.2. Outcome of Selector Lists
As it is vivid from the above example that writing selectors adjacently with commas creates a list. Each outermost selector in a list takes each selector of the inner list and then they add it back into the list in the CSS stylesheet.
At first place, the .main-content and .sidebar forms an outer list. Whereas, p and ul create an inner list. After transpilation, the outer list and inner list multiply and forms a SASS selectors list of (2x2=4). These 4 SASS selectors are then joined back by commas and formulate the final CSS selector list.
Below are the four selectors which join to make an SCSS selector list.
Example
.main-content p, .main-content ul, .sidebar p, .sidebar ul
4.3. SASS Selectors Combinators
At this time, we are thinking that you know enough about CSS programming, on contrary to it, you can start learning CSS right now. In CSS, the combinators are basically helpers that help the selectors to select elements on a web page. This element selection depends on the combinator type as well as its placement. After selection, we can apply our sCSS rules to design the specifically selected elements. Similarly, in SCSS Programming, we take the help of combinators to join selectors while nesting our code and formulate the style rules. In SCSS coding, we can write combinators nested at different places in our rules:
- At the end of the outer selector
- Beginning of the inner selector
- Or even nested in between the two selectors
Consider the subsequent example to learn how combinators are helpful for SASS selectors in writing logical and pretty style declarations.
Example
body > {
ul{
font-size: 14px;
padding: 10px;
}
}
table{
+ tr{
background: #2a73cc;
color: #ffffff;
}
}
*{
~{
.info{
background: lightblue;
color: darkblue;
font-size: 16px;
}
}
}
body > ul {
font-size: 14px;
padding: 10px;
}
table + tr {
background: #2a73cc;
color: #fff;
}
* ~ .info {
background: lightblue;
color: darkblue;
font-size: 16px;
}
4.4. Outcome of Selector Combinators
As the above example portrays the usage of selectors along with some combinators <, +, and ~. These combinators have their own properties according to their placements in the nested chain. For example, the < combinator selects all the ul elements within the body parent.
Furthermore, the + combinator selects the very first <tr> in every <table> element. Similarly, ~ selects all the .info tags with this class name. Hence, nesting with selectors and then further with combinators make it much more useful to devise styling principles in SCSS programming.