SASS is a CSS pre-processor. It is used to process advanced CSS syntax before compiling and rendering the elements on the web page. Using SASS makes the coding process simpler and more efficient.
This article will walk you through everything you need to know about CSS SASS. Let us first begin by understanding what is a CSS pre-processor.
What Is CSS Pre-Processor?
CSS pre-processors are like compilers that help you compile CSS code from their own unique syntax. It means that you can write a code using the pre-processor’s syntax, and it will use the code to generate a CSS code. The HTML file can refer to the CSS file for the web page’s styling.
To use CSS pre-processors, you need not learn a new language, since you can write the code as you would in the CSS language. Also, with pre-processors, you can do a lot more. For instance, you can create variables with the help of pre-processors and use them multiple times throughout the code. Similarly, it also enables omitting braces and semicolons in the code. In a nutshell, CSS pre-processors help you simplify writing a code.
There are several pre-processors available for CSS. However, SASS is increasingly becoming mainstream in web development. Let’s learn more about SASS CSS.
What Is SASS CSS?
Short for Syntactically Awesome Style Sheets, SASS is a popular CSS pre-processor. SASS code is processed by the program and compiled into CSS code, which can be used to style HTML elements. SASS controls how it appears on the web page.
It is compatible with all CSS versions. SASS CSS also provides various features like variables, nesting, imports, etc. We will learn about these later in this article.
Syntax:
SASS CSS offers two different syntaxes: indented syntax and SCSS (Sassy CSS).
As the name suggests, the indented syntax uses indentation, similar to a programming language like Python. You can omit curly braces and semicolons while working with the indented syntax.
SCSS, on the other hand, is the newer version that is identical to CSS and uses curly braces to denote blocks and semicolons to separate rules.
How Does SASS CSS Work?
Here’s how the SASS pre-processor works:
- Write the code in SASS language.
- Compile the SASS code into CSS code.
- Include the CSS code into the HTML file.
Hence, you need three files: an HTML, a SASS file, and a CSS file.
Why Use SASS CSS?
You might wonder why learn SASS if the code is identical to CSS. There are a few reasons (discussed below) that make using SASS efficient for front-end developers.
-
Organized
SASS code is much more organized than standard CSS coding, which means that you can perform the same operations with less code. It is, therefore, crucial for large-scale projects, including multiple developers. The organized styling allows every developer to clearly understand the code written and executed by other individuals.
-
Easy to Learn
Learning SASS doesn’t take much time. Anyone who knows CSS can easily learn SASS without much effort and without investing too much time.
-
Reusability
SASS brings in the reusability feature of a programming language lacking in CSS. It allows using variables and blocks of codes that developers can reuse across the project. Hence, it helps reduce the chances of mistakes and makes it easier to make changes throughout the code.
HTML Code for Working With SASS CSS: Examples
Now that we have basic understanding of SASS and how it works, we will now be looking at various features of SASS CSS along with examples. For all the examples in this article, we will be using the following HTML code:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<div id="box1">
<h1>Hello, Welcome to Simplilearn!</h1>
<p>Here, you will learn about CSS and SASS.</p>
<ul>
<li>SASS</li>
<li>CSS</li>
<li>SCSS</li>
<li>Programming Languages</li>
<li>Courses</li>
</ul>
</div>
</body>
</html>
Output:
Using Variables in SASS CSS
Just like a programming language, you can use variables in SASS CSS as well. These variables allow you to store information that you can reuse throughout the code. You can basically store any CSS value, like fonts, color, size, etc. You can define a SASS variable using the ‘$’ symbol. Here’s a demonstration of using variables in SASS.
SASS Code:
$font-stack: Times New Roman
$primary-color: #00FFFF
$pad: 10px
body
font-family: $font-stack
background-color: $primary-color
padding: $pad
Write this code in the input.sass file. Once the code is written, it will compile this to CSS code, which you can store in the ‘mystyle.css’ file. Here’s how the compiled CSS code will look.
CSS Code:
body {
font-family: Times New Roman;
background-color: #00FFFF;
padding: 10px; }
When we process the SASS file, it will take the values mentioned in the $font-stack and $primary-color and use it where the variables are mentioned. The HTML file will then use the CSS file to produce the following output.
Output:
Using Nesting in SASS CSS
Nesting is another feature of SASS inspired by the HTML language. While writing an HTML code, you will see a clearly nested coding system. It helps with visual hierarchy. However, with CSS, you don’t see such nesting. SASS CSS allows nesting selectors to provide the same visual hierarchy. Here’s the code for using the nesting feature with the above HTML code.
SASS Code:
$font: Calibri
$pad: 15px
$bgcolor: #00FFFF
$color1: #FF0000
$color2: #FFFF00
body
background-color: $bgcolor
#box1
margin: 10px
color: $color1
h1
font-family: Times New Roman
color: $color2
ul
font-family: $font
font-size: 15px
li
color: #800000
After compiling this code, the CSS code will look like this.
CSS Code:
body {
background-color: #00FFFF; }
body #box1 {
margin: 10px;
color: #FF0000; }
body #box1 h1 {
font-family: Times New Roman;
color: #FFFF00; }
body #box1 ul {
font-family: Calibri;
font-size: 15px; }
body #box1 ul li {
color: #800000; }
As you can see, the SASS pre-processor allows you to nest the code within selectors without providing an external reference for the same. Once the browser uses this CSS code with the HTML file, it will provide the following output:
Output:
Using Partials in SASS CSS
Styling files can grow into larger files, and managing them can become a challenge. Even if you use SASS for organizing the code, larger files will still lead to many errors. SASS partials allow you to overcome this issue.
Partials in SASS CSS are like code snippets that you can write in one file but not compile into a CSS code. You can then use the partial files, which will be compiled in some other SASS file.
To create a partial file, you need to use an ‘underscore’ before the file name. For instance, you can name a file like “_font.sass.” The underscore indicates to the SASS pre-processor that the file is a partial SASS file and should not be compiled. You can include all the details you want in this file and use them in other SASS files to compile it. For instance, in our “_font.sass” file, you can include all the font details, like font-size, font-family, color, etc. You can then use the file in the main SASS file with the help of the @use rule.
Using Import in SASS CSS
Once you use partials in SASS CSS, you need to call them in the main file to use them. The @use rule helps to do this in the SASS file. For instance, to call the “_font.sass” file, you can write @use ‘font’ to import all the details from the partial file and use it in the main file.
Using Mixins in SASS CSS
Mixins are like variables for storing code blocks and not just a single value. Hence, if you have some styling that you want to use for multiple elements, you can use mixins. You can use the @mixin directive to create a set of codes, and then use the @include rule to use the code included in the mixins. Here’s an example of a mixin for font styling. We will create the mixin directive with the name font_details and provide different values to style the elements in our HTML code.
Example:
SASS Code:
$fs: 20px
$bgcolor: #00ffff
$pd: 20px 35px
@mixin font_details()
font-family: Georgia
font-size: $fs
background-color: $bgcolor
#box1
@include font_details()
padding: $pd
Compiling the program will result in the following CSS code:
#box1 {
font-family: Georgio;
font-size: 20px;
background-color: #00ffff;
padding: 20px 35px; }
When you run this code with our standard HTML code as mentioned earlier, it will provide the following output:
You can also make the mixins flexible by declaring them with variables initially and then defining them while using them in the code. For instance, in the example below, alongside the font_details mixin, we will create separate mixins for h1_style and list_style with variables and define them while using the code.
Example:
SASS Code:
$fs: 20px
$bgcolor: #00ffff
$pd: 20px 35px
@mixin font_details()
font-family: Georgio
font-size: $fs
background-color: $bgcolor
@mixin h1_style($size, $color)
font-size: $size
color: $color
@mixin list_style($size, $font)
font-size: $size
font-family: $font
#box1
@include font_details()
padding: $pd
h1
@include h1_style(30px, #ff0000)
ul
@include list_style(15px, Times New Roman)
Compiling this code will result in the following CSS code:
#box1 {
font-family: Georgio;
font-size: 20px;
background-color: #00ffff;
padding: 20px 35px; }
#box1 h1 {
font-size: 30px;
color: #ff0000; }
#box1 ul {
font-size: 15px;
font-family: Times New Roman; }
When we use this CSS code with our HTML file, it will give the following output:
Using Extend/Inheritance in SASS CSS
The @extend feature of SASS CSS allows you to share multiple properties across selectors; the placeholder class helps complete this action. A placeholder class will only execute when extended. You can extend any CSS selectors with the help of the @extend rule. Here, we will look at an example of extending the feature to create and style borders for each selector in our HTML code.
Example:
SASS Code:
// This CSS will print because we will extend it.
%border_style
border: 5px solid #00ffff
padding: 25px
// This CSS won't print because we will never extend it.
%wont-print
display: flex
margin: 20px
body
@extend %border_style
#box1
@extend %border_style
border-color: #ff0000
h1
@extend border_style
border-color: #00ff00
ul
@extend border_style
border-color: #0000ff
This code will be compiled to the following CSS code:
body, body #box1 {
border: 7px solid #00ffff;
padding: 30px; }
body #box1 {
border-color: #ff0000; }
body #box1 h1 {
border-color: #00ff00; }
body #box1 ul {
border-color: #0000ff; }
Using this CSS code file with our index.html file will give the following output:
Using Operators in SASS CSS
The SASS CSS operators allow you to perform math calculations for styling. Suppose you have to work on a fixed-size element, operators like +, -, *, %, and math.div() can help convert pixel values into percentages for hassle-free layout calculations.
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
You can use SASS CSS for multiple purposes. You have to install the SASS pre-processor, and then you can start using all the features and functions of SASS. As you would have already seen, SASS codes are identical to CSS codes, only without curly braces and semicolons, making the code more readable and organized. Using SASS or other pre-processors will eliminate the worrying associated with CSS. However, it is advised to understand all the fundamentals of CSS before proceeding with SASS and start working with all the SASS CSS functions to get a firm grip on the concept. You can refer to Simplilearn’s CSS Tutorial for Beginners or Advanced CSS Tutorial for becoming a CSS pro.
But learning CSS alone won’t help. CSS is just a styling language that helps style what’s rendered on the front-end of the web page. To excel in software development, you need to master all the front-end programming languages. You can do that easily by enrolling in our Post Graduate Program in Full-Stack Web Development or opting for our 90-day free Front-End Web Development Course. A certification in any of these programs will increase your credibility as a developer and help you find better job prospects.