Sass Basics

Introduction to Sass

Sass stands for Systematically Awesome Style Sheets.

It is a CSS pre-processor. A CSS extension that is used to add power and elegance to the basic language. It makes possible you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.

Advantages and Disadvantages of Sass

Advantages

• Sass facilitates you to write clean, easy and less CSS in a programming construct.
• It contains fewer codes so you can write CSS quicker.
• It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
• It is compatible with all versions of CSS. So, you can use any available CSS libraries.
• It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions and other values.

Disadvantages

• The developer must have enough time to learn new features present in this preprocessor before using it.
• Using Sass may cause of losing benefits of browser’s built-in element inspector.

The & character

The ampersand (&)is the main reason to use SUIT, BEM and conventions like them. It allows to use nesting and scoping. Here’s an example. Without using the ampersand, we need to create separate selectors to create -title and -content elements.

When using SUIT, the second result for -content to be how we write all selectors. To do so, we would need to repeat the name of the component throughout. This increases the chance to mistype the name of the component as we write new styles. It’s also very noisy as it ends up ignoring the beginning of many selectors which can lead to glossing over obvious errors.

If this were normal CSS, we’d be stuck writing the above. Since we’re using Sass, there’s a much better approach using the ampersand (&). The ampersand contains a reference to the current selector along with any parents.

In the above example we can see how the ampersand references each selector in the chain as it goes deeper into the nested code. By utilizing this feature, we can create new selectors without having to rewrite the name of the component each and every time.

We can take advantage of the ampersand to write the name of the component one time and simply reference the component name throughout. This decreases the chance that the component name is mistyped. Plus, the document as a whole becomes easier to read without .Header repeated all over the code.

Sass Variables and Scoping

Sass variables are used to store information that can be reused throughout the stylesheet when you need. You can store things like colors, font stacks, or any CSS value according to your future reusability.

Before we explore Sass variables with selectors, we need to understand how they’re scoped. Sass variables have scope, just like they would in JavaScript, Ruby, or any other programming language. If declared outside of a selector, the variable is available to every selector in the document after its declaration.

Consider the below example for declaring and accessing variables.

Variables declared inside a selector are scoped only to that selector and its children.

We know variables can store font names, integers, colors, etc. It can also store selectors. Using string interpolation, we can create new selectors with the variable.

Here the variable is globally scoped. We can fix that by creating the $block variable inside the component declaration, which would scope it to that component. Then we can re-use the $block variable in other components.

It looks cool, but again we have to write the theme name over and over. Let’s store that in a variable too.

We can improve this even further. Variables can also store the value of the ampersand!

Mixin’ it up and @include

Mixins can be used to group styles that can be assigned different values and can be used multiple times like function. We can also pass arguments in mixin like function, which allows us to write reusable code.

Mixins are defined using @mixin at-rule and it can be used in the current context using @include at-rule.

CSS properties like font-size, font-weight, and line-height are few of those which needs to be used at many places in the project with different values at every place. So we will create a mixin to quickly set those values. It’s like a function which can be used to define those properties without having to write them in full.

There’s the name of the mixin (text) and it takes in three arguments. Each argument is tied to a CSS property. When the mixin is called, Sass will copy the properties and the pass in the argument values.

There is one limitation in this mixin. Whenever we use this “text” mixin, we always need to define all the three properties of that mixin. But what if we only need two properties at some places or need only single property. There is provision in mixin, that we can check the null value passing in that property and useif statement to help control the output.

Now, If I try to use the mixin without using null as a parameter on the values I don’t want to use or provide, Sass will generate an error:

To get around this, we can add default values to the parameters, allowing us to leave them off the function call. All optional parameters have to be declared after any required parameters.

In my next article I will discuss, Sass @-Rules and Control Directives

The best way to have something to write on, is to learn new technologies. Learn new frameworks you were not asked to learn, and write on it. My current organisation “ Technossus” always support me in learning new technologies and sharing knowledge among others. So I wrote this article about “Sass Basics” which will help people, specially UI Designers/Developers in understanding what is Sass and how we can use it. I hope you found it helpful. Happy Learning.

Thanks.