SASS for CSS: Advance your frontend skills with CSS preprocessor

If you’re a frontend developer, you know that CSS can be fun, but as your stylesheets get larger, they get harder to maintain and organize. That’s where CSS preprocessors like SASS come in to save the day. SASS empowers frontend developers to advance their frontends skills with unique features that extend CSS capabilities.

Today we will walk you through a beginner's intro to SASS and CSS preprocessors to get you familiar with this game-changing tool.

Here’s what we will cover today.

• What is SASS?
• What is a CSS preprocessor?
• Why should you use a CSS preprocessor?
• SASS vs. CSS. vs. SCSS
• Intro to SASS features and processes

Are you ready to take your CSS skills to the next level? Get started now with Educative’s SASS for CSS: Advanced Frontend Development and get up-to-date on all the features you need to be an advanced front end developer.

What is SASS?

SASS (Syntactically Awesome Style Sheets) is a scripting language and CSS preprocessor that compiles into CSS to make faster, easier, more elegant stylesheets. SASS adds new features and tools on top of basic CSS help you organize stylesheets for large codebases in a maintainable, useful way. By extending CSS code, SASS builds off of everything you love about CSS and makes large codebases user-friendly.

What is a CSS preprocessor?

SASS is a tool called a CSS preprocessor that can be used to code more maintainable CSS. But what does that really mean? As you might know, writing CSS can become rather repetitive. A preprocessor resolves this issue! A CSS preprocessor is essentially a scripting language that takes one type of data and converts it to another type. It extends the default capabilities of CSS by allowing you to generate CSS using the original language’s syntax, which can be compiled into CSS.

SASS for CSS: Why you should be using a CSS preprocessor

A CSS preprocessor has the potential to transform your productivity and frontend skills. After learning CSS, it’s the next natural step to advance your career. A CSS preprocessor speeds up development time and resolves many of the limitations of CSS. Let’s break down a few of the major advantages of using a CSS preprocessor.

• They generate cleaner code due to nesting and variables. One huge advantage of SASS is that you can nest CSS selectors within selectors. This means that you only need to change the name of an element once. Similarly, with SASS, you can use variables. This allows you to store a value and reuse them throughout your files, simplifying your code overall!

• You keep your CSS code Dry (“Don’t repeat yourself”). Since you can now reuse code you’ve already written, you’re less likely to make mistakes, you stay more organized, and you save time by not repeating tasks. The code you write and test will continue to work no matter where you use it.

• They provide more flexibility. A CSS preprocessor resolves some of the rigid features of CSS. There are more things you can do spontaneously when you use a CSS preprocessor, such as conditionals or calculations. You can even modify colors on the fly so you don’t have to hard code them in CSS.

• They are more stable than CSS. A preprocessor adds a certain level of stability and maturity through features like mixins, nesting, inheritance, and more, which we will discuss shortly. The stability from a preprocessor makes it easier to handle large codebases.

• They make CSS code more organized. Features like variables and functions mean you can shave off verbose CSS code, making it far more readable and organized. In the long run, organized code is easier to work with, share, and edit.

Sass vs. CSS vs. Scss

CSS (Cascading Styles Sheets) is used to add style and format to web pages. These style sheets are partnered with HTML and JavaScript to define text styles, font-size, and more to create a uniform look on a website. Typically, a website will have one CSS document that describes the style for all the pages to reference. Unfortunately, CSS can be hard to master, and it is somewhat limited.

That’s why SASS was developed as “a better CSS”. It introduced new features and ease. SASS has two different syntaxes that often confuse beginners: SASS and SCSS. Let’s break down the difference.

SCSS (aka Sassy CSS) is the modern standard of CSS that uses brackets and semicolons. SCSS was introduced in version 3 of SASS as a superset of CSS. It accommodates the concern that SASS uses a foreign syntax. SCSS does not extend the CSS standard but simply advances CSS syntax. In fact, CSS is valid in SCSS syntax, so it’s easy to convert between the two. SCSS files use the .scss extension, and when we use SCSS, we still call it SASS.

SASS, on the other hand, is a CSS preprocessor and an older syntax that uses indentation for organization and separation of code blocks. It essentially provides a concise way of writing CSS that extends its functionality. SCSS files use the .sass extension.

In general, these are the pros that developers raise for both. Let's look at a few common arguments.

SASS is…

• More concise
• Easier to read
• “Complains” less about semi-colons
• Supported by a larger community of developers

SCSS is…

• More expressive
• Encourages modular code
• Integrates well with CSS

SASS in CSS: Features that extend your vanilla CSS

SASS sounds great, right? So, what can SASS do for your CSS specifically? Let’s discuss the four most notable features of SASS that extend your vanilla CSS code.

Variables

Variables provide a way to store information or bundles of information that you can reuse throughout your stylesheet. For example, you could store color values or fonts that you can then reuse at any time in your CSS code. This means that if you want to change a clue, you only need to update it once.

Variables save you tons of time rewriting that code, and it also prevents mistakes from cropping up along the way. Variables are particularly useful for large projects.

Defining a variable is quite easy in SASS. You just need the $ symbol. Let’s look at an example where we define a color as a variable.

$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}

Now the background-color is yellow, and when we compile our code, it generates the following CSS code.

body {
  color: #ffff00;
}

Nesting

SASS adds nested syntax, which allows you to target DOM elements in a much cleaner way. You no longer have to rewrite selectors multiple times, so making changes to your stylesheet is now a breeze.

Take a look at the original CSS code and compare it to the nested SASS code. Notice how nesting of li and ul adds a hierarchical, visual structure to CSS code, making it far easier to use, edit, and read.

Original CSS

.navbar {
  background-color: orangered;
  padding: 1rem;
}
.navbar ul {
  list-style: none;
}
.navbar li {
  text-align: center;
  margin: 1rem;
}

CSS with SASS Nesting

.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}

Mixins

Mixins allow you to group multiple lines of code together that you can reuse throughout your code. They are similar to functions in other programming languages

Note that mixins are different than SASS functions, so don't get them confused.

To create a mixin, you simply write your mixin and add it into the code using the @include directive wherever you want it. The mixin can be updated at any time.

Creating the SASS mixin

@mixin transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

Adding the mixing to our code

.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
    @include transform;
  }
}

Partials and Importing

SASS partials allow us to break up our files into smaller files. We can essentially modularize CSS to make more maintainable code. You can create a partial file that only contains relevant code per section. This is useful if your SASS file is getting too large.

The name of a partial begins with an _ underscore. It can then be imported at any time using the @import directive.

Note: This directive is different than in CSS, as it does not make an HTTP request. Instead, it is importing and combining the files into one CSS file without affecting performance.

For example, we could make a header called _header.scss and transport all relevant code to that file. It can then be imported back into main.css using this directive:

// In main.scss
@import 'header';

Setting up a build process to boost your development workflow

Since SASS has so many features and tools, how will they all work together in the end? That is where a build process comes in handy. A build process is a sequence of tasks that perform automatically after we run our project. All our files are generated and deployed as a web server.

A build process can boost your development workflow, as you can compile, merge, prefix, and compress your stylesheets with a single command.

We will briefly introduce the steps for developing a build process that will make your life as a frontend developer a breeze. Here are the stages we need:

1. Compiling: the main.scss file performs the compilation to CSS. As we learned before, SCSS compiles very easily to CSS. We perform compilation using the package.json file.

2. Concatenating: This is where we merge all our CSS files into one. We can test this using a CSS file called additional.css.

3. Prefixing: using an autoprefixer ensures that our files are functional across all the major browsers by adding vendor prefixes to our code. This can either be done manually or with a tool like Autoprefixer.

4. Compressing: This is the stage where we compress our code to maximize performance. We do this using the following line of code:

"compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"

Writing a script to run our code

Once these steps are performed in your package.json, we can write one final script to run all our code at once. We use the following line of code.

"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"

Our final code will add all our tasks to be run when we execute our build command, including compile-sass, concat-css, prefix-css, and compress-css. We can then use the npm-run-all package to check that it works on different platforms using the following command:

npm install npm-run-all --save-dev

You can then delete your files from your CSS folder and run the build command.

npm run build-css

Now all of your CSS files are generated from a single command! How easy is that?

If you want a more robust dive into the build process, check out Educative’s course on SASS for CSS. It walks you through each stage with detailed descriptions and handy tips.

Wrapping Up

Now you have a sense of some of the game-changing features that SASS introduces to your code. SASS makes your CSS simpler, more reliable, and more organized. On top of that, there isn’t a steep learning curve. You could get a strong grasp on SASS with just one online course.

We have only scratched the surface of what SASS has to offer. Other useful tools and features include

• functions
• inheritance
• & operators
• control directive,
• placeholders
• interpolation
• and more

If you are ready to advance your frontend skills and master these other features of SASS, check out Educative’s course, SASS for CSS: Advanced Frontend Development. This interactive, beginner-friendly course walks you through all the need-to-know information on SASS, including,

• structuring your SASS projects
• setting up media queries,
• setting up a build process,
• advanced features of SASS

By the end, you’ll be able to migrate an existing CSS codebase and set up an entire project from scratch!

Happy learning!