;
SERVICE

I Like It Sassy: Variables and Mixins – Part 2

shadow
The SASS logo

Author :  

shadow
The SASS logo
  • Recruit
  • Recruit

Sass is powerful and you can use variables and mixins to improve your CSS workflow. With variables, you can define values and use them in your code later. Another great feature in Sass is nesting which is another feature that you can use to their advantage. Finally, we will take a look at mixins, To store a value:

Variables

Variables can be used to store CSS values. It’s as simple as that. Let’s take a look at the syntax in SCSS and Sass.

SCSS:

Sass:

After storing a value, how do you use it? This is how in SCSS:

Here’s the Sass version:

The CSS will turn out like this:

As you can guess, you can use the variable on any selectors or even combine them with other values. Cool, huh?

Nesting

Nesting is simple and powerful, However, make sure that you do not overuse it. You can learn more by reading this nesting guide by the Sass Way.

The following code will turn into the following CSS:

Mixins

Finally, mixins are great for grouping together various rules; for example, you can use mixins to combine vendor prefixes.

SCSS:

Sass:

In essence, a mixin is a little bit like passing parameters into a function. You can select an element and then pass in some values and it will apply all of the vendor prefixes to that item.

Now that you understand a little bit more about SASS, on the next post, let’s take a look at how we can organize our code and then import them into our main stylesheet. If you have any questions, feel free to leave a comment below.

SERVICE
  • sns