Learning Sass: From Novice to Expert in 6 Steps

CSS (Cascading Style Sheets) is essential for successfully writing how HTML components must be presented on a web page to specify styles, design, layout, and everything else required to make a gorgeous website. 

However, as you begin dealing with huge, sophisticated projects, you can wonder if CSS may be better. Have the same thoughts? Then, your SASS time has come! Mastering SASS will save you time, code, and frustration if you use CSS. 

It's simply CSS with additional features and capability, and while it's been there for a while, it's good to know and grasp it through and out & how to utilize its capabilities fully. And in this MarsDevs guide, we will do just that! So, let’s roll.

What is Sass?

Let’s start with the basics. What is Sass? 

SASS (Syntactically Awesome Stylesheets) is a CSS pre-processor that allows you to use variables, mathematical operations, mixins, loops, functions, imports, and other useful features that make CSS programming much more powerful. 

As Wikipedia suggests, “A preprocessor is a program that operates its input data to create output that can be implemented as different input to another program.” 

Sass can be considered a style sheet extension language in certain aspects since it extends the conventional CSS features by incorporating the benefits of a basic programming language. As a result, Sass will compile your code and provide CSS output that a browser can comprehend.

Yes, you just read "programming language," but it's extremely simple. Sass will only take 15 minutes to learn if you are a coder. However, your learning curve will be steeper if you have no prior coding knowledge. After learning CSS using Sass, you will no longer create CSS from scratch.

Sass syntax

Sass provides two syntactic options:

SCSS (Sassy CSS): It uses the .scss file extension and is completely CSS syntax compliant, with a few exceptions. It is commonly used since it is similar to writing CSS.

nav{
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li{
        display: inline-block;
    }
    a{
        display: block;
        text-decoration: none;
    }
}

The Indented Syntax (Sass) uses indentation instead of brackets and semicolons as syntactic sugar. It is faster to build, even though it is incompatible with CSS syntax. The file extension is .sass.

nav
    ul
        margin: 0;
        padding: 0;
        list-style: none;
    
    li
        display: inline-block;

    a
        display: block;
        text-decoration: none;

How Sass Works?

Sass is a CSS preprocessor language that is interpreted. A preprocessor language changes input data to output that another program may utilize as input.

It implies that when you execute Sass code, it converts your code to CSS. A browser will then use the CSS code output directly. As developer Yogesh Chavan said, “Every CSS file is a Sass file. So you can put your .css file contents in a Sass file & it will work just fine.”

Why bother with the extra step of converting Sass to CSS? Because only CSS code can be seen by browsers! So, now that you know how Sass works and why so many developers adore it let's look at some of its most appealing features.

Sass features

As you would expect, the way Sass works means there is nothing you can code in Sass that you couldn't also code in CSS. However, Sass has a few unique features that enable developers to code more rapidly and efficiently.

1. Partials: It becomes harder to manage stylesheets as they grow in size over time. As a result, it only makes sense to divide your stylesheets into smaller sections. In other words, Partials aid in the organization and structure of your code.
   
   To set up a partial, start the file name with an underscore _, then import it into another Sass file using the @import directive.

2. Nesting: Nesting in Sass offers better style organization and reduces repetition. Although this is a fantastic feature, the norm is to nest at most three child selectors to avoid confusion caused by nesting too many components.‍
3. Modules: You don't have to write your Sass in a single file. With the @use rule, you can break it up any way you like. This rule loads another Sass file as a module, which means you may refer to its variables, mixins, and functions in your Sass file using a namespace, depending on the filename. Using a file will include the CSS it creates in your compiled output!‍
4. Extend/Inheritance: Another fantastic aspect of Sass is inheritance. The @extend directive is used to do this. Inheritance is a SASS feature that allows many classes to share a common set of attributes.‍
5. Operators: Doing math in your CSS is very helpful. To make it easier, Sass has a few conventional arithmetic operators like +, -, *, math.div(), and %.‍
6. Interpolation: Interpolation is the insertion of a code. It enables us to include SASS expressions in our code. As variables, we can use a selector or property name, quoted or unquoted strings, etc.

Why use SASS over conventional CSS?

CSS's standing as an extensive programming language is still up for discussion. However, regardless of what you think on the topic, it's clear that CSS was meant to offer instructions on how a web page should look rather than to execute decision-making tasks and operate with variables.

While everything in Sass can be done in CSS, Sass helps you, the developer, write code that looks and feels like a programming language. What else? 

1. It's CSS syntax-friendly:

SASS is synonymous with CSS. SASS has two syntaxes - SASS and SCSS are more often used. SCSS syntax is CSS compatible, so simply rename your .css file to .scss, and you're done! Just like that, your first SCSS file is ready!

2. It offers variables:

Using variables is one of the many advantages of using a CSS pre-processor like SASS. A variable allows you to keep a value or a combination of values and reuse them as many times and places as you like in your Sass scripts. Simple, effective, and practical!

3. It includes mixins:

Variables are excellent, but what if you have code blocks that repeat in your style sheet several times? That's where Mixins come in! In other programming languages, mixins are similar to functions. They can take arguments, including default settings, and return a value or group of values. 

4. Large community and is well-documented:

Another benefit of adopting Sass is the vast quantity of material that is available online. Sass contains everything you need to become an expert, from tutorials to books. One of the best places to start is the official Sass Documentation page, which has excellent documentation and practical examples. The Sass community page also has a lot of wonderful materials, such as fascinating blog entries, guides, tutorials, projects, and so on. When it comes to learning Sass, you will not feel alone.

5. Easier to write and maintain:

Sass is more structured than CSS because it employs a tree-based syntax and can be written in any order, whereas CSS is based on the cascade rule, which requires you to write your styles in the order they will be applied. It massively eases the learning & reading of Sass codes.

Install & Configure Sass

Now that we are done with Sass basics let’s install it. 

Install Sass with Node.js

To begin, we will download and install Node. Then, using the JavaScript package manager npm, we'll install and set up Sass in your project.

First, run the command.

npm install -g scss

Then create a Sass file, like:

style.scss

Where style is the file name.

Then, from the Sass file, run the following command to build a style.css file:

sass --watch style.scss style.css

The source file is style.scss, and the destination file is style.css, where Sass creates the CSS code. 

And you’re done! 

Install Sass Using VS Code

First, we’ll download and install Microsoft's VS Code editor. Then, start the editor to get the Live Sass Compiler plugin.

That's all there is to it. You can utilize Sass in your projects after the installation is complete. Simple. 

Looking Into the Future of Sass

With standard CSS always improving, one must consider whether SCSS is still helpful in web application development. Despite the CSS updates, SASS/SCSS continues to provide important capabilities that make it a preferable choice.

However, Sass aids in the development of scalable applications. It modularizes your stylesheets, making them easier to manage and update as your app develops in popularity. SASS also helps you to grow and add additional features to your web project owing to its simplicity of modification.

As Jacob Lett says, “Learning HTML & CSS is even more challenging than earlier. Responsive web design adds more complexity to designing and developing websites.” And that’s where Sass brings in the magic! 

Remember that Sass is, above all, a tool for writing more efficient CSS code. Knowing Sass indicates to hiring managers that you can complete tasks more rapidly and are capable of working on large, complicated web projects!

Need help starting with Sass? Let MarsDevs help. Reach out to us today!

FAQ

1. Is Sass still used in 2023?

Many creators tend to use Sass. You wouldn’t use it directly, but one of your tools is based on it. 

2. How is Sass different from CSS?

Sass is a scripting language that widens the possibilities of CSS. It contains the necessary elements of a programming language, like variables, conditional expressions & functions. Sass is less repetitious than CSS & is widely used to build sophisticated programs.

3. Is Sass better than Bootstrap?

"Consistency," "UI Components," and "Responsiveness" are the primary factors why developers pick Bootstrap, whereas "Variables," "Mixins," and "Nested rules" are the major things why Sass is needed.