Vue Tutorial: Using SASS with Vue.js

Vue is a powerful tool by itself, and it enables us to write nice code fast. However, there are many additional things that we can do to write code even faster. Switching from CSS to SASS is one of them. In fact, SASS is a super-charged version of CSS that allows you to do much more than just CSS. Even better, it is very easy to learn if you know CSS already. In this tutorial, we will see how to integrate SASS in your Vue.js app.

You can guess that today we talk about Vue.js with SASS. As such, you should be familiar with Vue.js and know already about CSS. That’s just because SASS builds on top of the very same concepts of CSS. In case you need a refresher, go here for Vue, and go there for CSS.

What is SASS?

The SASS acronym is quite pretentious: Syntactically Awesome Style Sheets. Indeed, if you hop onto the SASS official website, they say it is CSS with superpowers, and they give you the following definition:

Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world.

Official SASS Website

In short, SASS is an extension language to CSS. It means you write in this new language, SASS, and then this is compiled into traditional CSS. All of this to enable you to write code that is easier to write and to read (for developers), without worrying about what the browser might actually need.

SASS syntax is extremely similar to CSS, but with some key perks. For example: no need to use semicolons and brackets, the possibility to nest selectors into one another, or the use of variables and formulas and basic conditions.

At this point, you may think about possible drawbacks. There are none. Some people get scared about the fact that is a compiled language. This means, to put it in simpler terms, that no browser understand SASS. Instead, when you package your application, you have to translate it into CSS. That is easy, and Node.js can do that for us. Even better, it can do that in realtime when we run our development server so that we can quickly see the changes we make.

I hope all of this convinced you to install SASS. Hence, we can now see how to install it.

How to Install SASS with Vue.js

With a normal frontend node.js app, we would need to install webpack so that it can artificially translate the SASS we write into CSS. However, Vue.js makes things much simpler, because it supports SASS straight out of the box.

Yes, you read it right. You do not need to perform an installation of SASS, you can just start writing SASS code in your components. However, you do have to tell Vue if the style to be parsed is either CSS or SASS. To do that, in your component, simply specify the lang attribute to the style tag.

<style lang="sass">
// Your SASS style goes here ...
</style>

Now that we cleared that we have SASS ready in our application, we need to write our style using SASS.

Writing SASS Code

The Basics

SASS starts as a much cleaner version of CSS. Take a look at the following standard CSS code.

.myclass {
  background-color: red;
  padding: 0 12;
  font-family: Arial, sans-serif;
}

Most of normal CSS rules will look like the one below. Yet, since we are very diligent at writing one instruction per line and indenting the content, we do not actually need brackets and semicolons. SASS allows us to omit them, so if we want to rewrite the same code with SASS we would do:

.myclass
  background-color: red
  padding: 0 12
  font-fmaily: Arial, sans-serif

Just with that you made your code cleaner, but SASS goes beyond that. You can nest selectors one into the other. The following code:

.container
  display: flex
  justify-content: space-around
  .item
    background-color: red

Is equivalent to traditional CSS:

.container {
  display: flex;
  justify-content: space-around;
}

.container .item {
  background-color: red;
}

See? In SASS we nested the .item selector inside .container, and we saved a lot of space, maintaining clarity and conveniently grouping things together.

With just that you can write better styles that are way easier to create and maintain. But SASS goes beyond even that.

Variables

With SASS, you can define a variable and then use it all over your code. The most common use-case for this is colors. You write a palette of colors just once, and then you use it all over your styles so that whenever you want to change the colors you can only edit the palette.

Variables start with a dollar sign, and to define their values you use a colon, followed by their value. Then, you can use their name everywhere in the code.

$color-bg: #fdfdfd

.container
  background-color: $color-bg

Mixins

Mixins allow you to apply a set of multiple styles to an object. For example, imagine experimental properties that come with the browser prefix (e.g. -webkit– for Chrome and Safari, -ms- for Microsoft). Instead of applying over and over the same properties to many elements, we can define a mixin. This will take a value and apply it to multiple properties (or even take no value and apply properties statically). It is much like a function in normal programming.

To define a mixin, you start with an equal sign. You apply it with a plus sign as below.

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property

.box
  +transform(rotate(30deg))

The code above is equivalent to the normal CSS below:

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Obviously here the normal CSS looks the smaller one. But imagine you have to apply the same transform to many elements, with SASS you will have to apply just one line and not three.

Inheritance

Also known as extension, it is similar to mixin but with static properties. It allows you to define a set of properties to then apply to an object and modify. To define such shared properties you start with a percent sign. Then, you use the @extends keyword on your element.

%very-important
  color: red
  font-size: 72
  font-weight: 900
  text-transform: uppercase

.title
  @extends %very-important
  color: green

Operators

With all this juice, some math never hurts. You can perform basic operations with +, -, / and * operators. Interestingly enough, you can also mix different units while doing such operations.

.box
  width: 900px / 300px * 50%

SASS for Full Stack Developers

If you have been following us for a while, you’ll know we have a free Full Stack Development Course. As part of this course, we like to try everything that we learn hands-on, and this tutorial is no exception. As such, we have prepared for you an exercise to test your SASS knowledge and help you remember everything that you read.

Even if you are not following the course, you should try the exercise. In fact, I encourage you to do so, that’s the only way all this SASS goodness will stick into your brain.

In case you are curious, you can check the Pretend Bakery Store website we are building with all these tutorials on GitHub.com at alessandromaggio/full-stack-course.

The Assignment

Today, the assignment is very simple. We need to take some CSS and convert it into SASS. Specifically, we will take all the CSS in our components from our previous tutorial, and manually convert it to SASS.

In case you don’t have that code, you can download this commit from GitHub.com. This will give you the files you should start the exercise with.

The Solution

Obviously, the solution is the code converted to SASS. There is no point in showing here all the SASS code that we wrote, but instead, we encourage you to check this commit on GitHub.com. This will highlight all the changes that we made.

Just as a reminder, you should have removed brackets and semicolon, and most importantly added lang="sass" into your style tags.

Conclusion

You finally made it! You have now mastered SASS, and hopefully most of the frontend technologies out there that you need to develop a modern app. By far, we did not tackle everything and with everything you find in the course so far you shouldn’t consider yourself a senior developer – yet.

However, all the knowledge you gained is a clear compass that will enable you to navigate frontend development, and most importantly you have the tools to learn new and advanced stuff. Keep on with the good work!

As a side note, if you want to have some further reading on SASS, you can check the official Learn SASS guide.