Habilelabs-Logo
Blog

Understanding SASS – Uses and Features of SASS

December 9th, 2019 . 5 minutes read
Blog featured image

Working on CSS (Cascading Style Sheets) is fun but as the stylesheets are getting complex, it’s hard to maintain with CSS because of lack of certain features. This is the case where you need a pre-processor language like SASS. SASS can greatly remove tour stress and save your precious time. Sass contains a whole set of tools and features that are unavailable in CSS. It becomes easy with SASS to write a code that is more readable and maintainable.

SASS (Synthetically Awesome Style Sheets) is one of the CSS pre-processor languages, other common examples are LESS and Stylus. Basically, it adds more features in CSS, improves CSS syntax and lets you add logic and calculations in the code, which is not possible for CSS.

Use of SASS

We can utilize SASS in different ways depending upon which one is suitable for you. For example-

  • The first way is to use SASS with Ruby SASS library.
  • Install with ‘gem install sass’
  • Process compilation with sass demo.scss demo.css command.
  • The second one is to use in GUI App like desktop app: Hammer, CodeKit or Compass
  • The third way is to use it with CLI (Command Line Interface).

SASS/SCSS Features

SCSS and SASS, both are the syntaxes of SASS. SCSS is known as Sassy CSS, is a superset of CSS and is the most used version of SASS that means every CSS style sheet is a valid SCSS as well. On the other hand, SASS is a concise form of CSS and uses similar code as CSS except it uses indentation of lines instead of semicolon or bracket to specify blocks. Here, we will be using SCSS syntax of Sass-

1. Variable

Sass brings Variables in CSS which is the most useful feature. It allows to define values, including string, lists, colors, null and maps, that can be reused across the code. In Sass, variables start with $ sign-

For Example-

Here, we are defining two variables for primary and secondary colors-

The final output will appear in CSS instead of SCSS during the inspection, like this-

2. Nesting

Nesting is also one of the most beneficial features of Sass which CSS does not support. Sass lets you nest child selector into the parent selector is the same visual hierarchy of your HTML.

For Example-

The final output will appear in CSS instead of SCSS during inspection, like this-

3. Mixins

Mixins are yet another powerful feature in SCSS that reduce code redundancy and we can reuse the code again and again like a directive type feature. Mixins are more like functions as they can return a value and also can take parameters as input. Mixins allow you to define styles that you can re-use throughout the stylesheet.

Many CSS3 properties do not work easily with all the browsers so sometimes we have to use prefixes like ‘-moz-’, ‘-webkit-’, ‘o’, ‘-ms-’ etc.

For Example-

4. Functions

Functions are quite like mixins as they both accept variables. However, the only difference is that the functions return a single value. SASS functions are similar to functions in JavaScript, let’s check out-

For Example –

5. Partials and Import

Partials are separate SASS code files used to attach similar type of design components together into a single file. A partial’s name is defined by placing an underscore (_) before it. An import directive (@import) is used to import the partials into different components such as, we can import ‘_form.scss’ file into ‘login.scss’ and ‘forgot.scss’.

For Example-

In login.scss –

In forgot.scss –

6. Extend

The extend directive (@extend) is used to inherit the already existing styles and to extend CSS properties from one selector to another. It keeps your stylesheets very DRY.

For Example-

7. Inheritance

It also works like extend but we use a small package to define the inheritance process called a placeholder class. The placeholder selector starts with a ‘%’ sign. The advantage of the placeholder class is that it prints only in compiled CSS and keeps it neat & clean.

For Example-

8. Ampersand (&)

The ampersand operator (&) is yet another useful feature of SASS. It is used in SCSS by pseudo-classes and in BEM methodology (like Block, Element & Modifier methodology). It can easily nest the selectors sharing the same name. Also, during compilation, it will be replaced by the selector name enclosing it.

For Example-

9. Directives

SASS has many directives such as @extend, @mixins & @import and we have discussed them in the previous sections. However, some directives like @if, @else, @for & @while are still uncovered. You all would be familiar with ‘if and else’, ‘for’ and ‘while’ loops used in every programming language as a conditional statement for iteration. They fulfill the same functioning here in SASS, let’s check out with an example-

Conclusion:

Through good UI UX Design Tips, you can win over your customers. The more they will be happy, the more they will come to you.
For good Design, you need to know all the sources or platforms like CSS, SCSS, SASS, etc.

Hope this SASS related information will be useful for you. Ask me in the comment section if you want to ask about any of SASS I shared above.

Habilelabs is providing high-quality UI-UX design and development servicescontact us to discuss your project.

Thanks and Regards,

Author: Habilelabs
Share: