SASS

Credits: Shirsendu Das

Sass (Syntactically awesome style sheets) is a preprocessor scripting language that is compiled into Cascading Style Sheets (CSS). It enables you to use things like variables, nested rules, inline imports and more. With this, we organize our CSS and make it faster.

It is supported by all browsers: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

It is a superset of CSS, which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.

Sass includes two syntaxes –

SCSS & Indented (simply called ‘Sass’)..SCSS is an extension of CSS syntax. It make more easier and simplest to maintain the large css and it organized it also.

.SASS file it is not fully compliant with CSS syntax, but it’s quicker to write.

Sass provides the following mechanisms: Variables, Nesting, Mixins, And Selector Inheritance

1. VARIABLES

Like other programming languages, Sass allows variables. Under this variables we store some information and this is used anywhere in our css.

2. NESTING

CSS supports logical nesting, but codes blocks themselves are not nested. But Sass allows the nested code. Example here:

3. MIXINS

One of the advantages of using preprocessors is their ability to take the complex, long-winded code and simplify it. This is where mixins come in handy!

Example here:

4. PARTIALS

Partial Sass files contain little snippets of CSS that we can include in other Sass files. It is a great way to modularize our CSS and help keep things easier to maintain. Partial is simply a Sass file named with a leading underscore, something like this _partial.scss.

Example here:

5. IMPORTS

Our created _partial.scss we can @import in our current file and create a single CSS file. It makes our CSS file organized.

Example here:

you have a 2 Sass files, _reset.scss, and base .scss. We want to import _reset.scss into base.scss.

6. EXTEND/INHERITANCE

@extend directive has been called one of Sass’ most powerful features. Using @extend we share a set of CSS properties from one selector to another. It helps keep your Sass very DRY.

%message-shared

border: 1px solid #ccc

padding: 10px

color: #333

.message

@extend %message-shared

.success

@extend %message-shared

border-color: green

.error

@extend %message-shared

border-color: red
[cbCode]

Here we see this classes .message, .success, .error behave just like %message-shared. That means anywhere that %message-shared shows up, .message, .success, .error will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as %message-shared. This helps us to avoid writing multiple class names on HTML elements.

7. OPERATORS

In Sass we’ll have access to standard maths functions like addition, subtraction, multiplication, and division.

Conclusion

CSS preprocessors reformed frontend development. While some designers cannot imagine working without them, others have a doubtful approach towards them. I hope that by bringing closer the topic of preprocessors I encouraged you to give them a chance. Who knows, maybe they become an integral part of your everyday workflow.