Revision:
SCSS nested rules enable us to write nested rules using the curly braces to enclose the style rules for nested elements, just like in HTML. Nested rules make it easier to write CSS code and makes the style rules more readable.
example 1: nested rules
HTML:
< div id="sidebar">
< ul>
< li>Tutorials< /li>
< li>Q & A Forum< /li>
< li>Flashcards< /li>
< li>Tests< /li>
< li>Collaborate< /li>
< /ul>
< /div>
CSS code is written as follows:
#sidebar {
float:left;
width:25%;
background-color:lightblue;
padding: 30px 10px;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar li {
padding: 6px;
margin-bottom: 10px;
background-color: #10A2FF;
color: #ffffff;
}
SCSS code is written as follows:
#sidebar {
float:left;
width:25%;
background-color:lightblue;
padding: 30px 10px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 6px;
margin-bottom: 10px;
background-color: #10A2FF;
color: #ffffff;
}
}
Nested properties are used whenever there are CSS properties that come under same namespaces. Consider "background" namespace in which we have properties such as background-color, background-image, background-repeat, background-attachment, background-position. In the case of CSS, we need to type all these properties separately if we want to use them. But SCSS provides us the shorthand nested way, which makes work much easier where we write the namespace followed by all the properties i.e. in a nested way.
example 2: nested properties
body {
background:
{
color: yellow;
attachment: fixed;
repeat: no-repeat;
}
}
This will be compiled to:
body {
background-color: yellow;
background-attachment: fixed;
background-repeat: no-repeat;
}
In SCSS syntax, we can use the & symbol(ampersand) to represent the parent class and define further nested rules. This ampersand(&) in SCSS represents the parent selector and we can use it to write nested properties easily.
The syntax for using the parent selector in a stylesheet in its nested selectors is very simple. All you have to do is use & (ampersand) as a prefix followed by some text and when you will compile the SCSS code into CSS code the ampersand sign will be replaced with the name of the parent selector.
syntax:
#someclass {
/* nested property using parent selector */
&-body {
/* this will be compiled as #someclass-body */
}
}
example 3: parent selector
a {
text-decoration: none;
color:black;
// using parent selector
&:hover {
color:red;
}
}
This will be compiled to:
a{
text-decoration: none;
color:black;
}
a:hover {
color:red;
}
SCSS partials are the CSS files that contain small CSS code specific for a particular styling, separated from the main stylesheet for better managing the CSS code. These files can be used in another SCSS file instead of writing the same styles again, using the @use at-rule or @forward at-rule with both of them including the stylesheet with different visibility.
SCSS partials provide a great way to organize your CSS code in different files and then use them wherever required. Do make a stylesheet as partial in SCSS, its name should always begin with "_" underscore character (e.g. _partial.scss).
The underscore character as a prefix to the stylesheet name indicates that this is a small chunk of CSS so there is no need to compile this to CSS independently.
Partials are used to manage the styling code into functionally divided style rules covered in separate file, which can be used in the main stylesheet using the @use at-rule. There are many advantages, such as the main stylesheet will be less bulky, partials are not compiled making the overall compilation of SCSS code to CSS fast, and you can control visibility of the style code defined in partials using @use at-rule or @forward at-rule based on your requirements.
The "_" character and the file extension are not used while importing. Once we include the file then all the contents in the partial will be available for use in the main file.
In SCSS we can define a private member in a stylesheet by adding a hyphen(-) or underscore(_) as a prefix to its name. The private members work normally within the stylesheet(partial) it is defined, but they are not visible to the stylesheet including this partial.
example 4: partial: private members
/* src/_corners.scss */
$-radius: 3px;
@mixin rounded {
border-radius: $-radius;
}
Now, if we import this stylesheet in another stylesheet:
* style.scss */
@use "src/corners";
.button {
@include corners.rounded;
/* This is an error! $-radius isn't visible outside of `_corners.scss`. */
padding: 5px + corners.$-radius;
}
When we include a partial in a stylesheet using the @use at-rule, then if that stylesheet(which is importing the partial in it) is included by any other stylesheet, members defined in the partial won't be visible. For making the members of the partial available in this case, we must use the @forward at-rule. If we use the @use at-rule, we can hide the members of a partial from further use. Using the @forward at-rule enables using a partial included in a stylesheet in further imports.
SASS and SCSS are two sides of the same coin. With some minor differences in their syntax like SCSS using the semicolons, and SASS using indentation, it's your choice what you want. Whatever you choose, you can always convert one style into another style.
If you have your stylesheet written in SCSS, you can convert it into SASS code and if you have your stylesheet written in SASS you can convert it into SCSS code. Either syntax can import the file written in another syntax. At this point, there is no need to rewrite the file in another syntax. The files can be converted using some simple command-line tool i.e. sass-convert.
SCSS comes loaded with many built-in modules which are just like pre-defined stylesheets, which can be directly included/imported in your stylesheet and used. We can use the @use at-rule to import SCSS built-in modules and can then access their members.
The URL for all the built-in SCSS modules begins with "scss:" so if you want to import the color built-in module, you will have to add the following statement in your stylesheet: @use "scss:color"
Once we import any built-in module we can use its member mixins, variable, functions, etc. using the modules name, followed by dot operator and then the name of the member.
By default, SCSS provides the following built-in modules:
sass:math module, which provides functions to perform various operations on numbers like ciel, clamp, floor, max, min, etc.
sass:color module, which provides various functions to perform various operations on colors like creating new colors based on existing colors, creating a lighter shade of an existing colors.
sass:string module, which provides functions to split, combine or search strings.
sass:list module, which is used to perform different operations on list value type.
sass:map module, which provides functions to perform operations on SASS map value type using functions like get, keys, has-key, merge, etc.
sass:selector module, which gives access to the SASS's selector engine used to inspect and manipulate selectors.
sass:meta module, which exposes the inner workings of SASS.