Technologies evolve more and more, not only with the arrival of HTML5 and CSS3, but also in development processes. Our job as web designers is known to evolve from day to day, where you have to adapt to new trends and different uses of the web.

Today a turning point is in integration methods at the level of HTML and CSS. In this article we will talk about Sass (Syntactically Awesome StyleSheets) that will revolutionize your CSS!

SASS doesn’t lack style!

Sass is an extension of CSS3, adding new rules in how we integrate web design. The big news is: variables, mixins, selection inheritance and various very useful options.

Comparing with LESS or SCSS, Sass goes further in simplifying the code. Sass is the logical continuation of the SCSS language, which simplifies the main syntax. To summarize, programmers will be done with “{}” and “;”, which was kind of a nuisance which ended up seeing our formatting not be taken into account when we forget to close our elements or our lines.

The characteristics of Sass

The Variables

A valuable tool that developers already know is $ MyObject, that can store any information (color, size, text, etc.) in, of course, said object.

Now it will be a breeze to change the color of a site without going through all the elements of the CSS, it will simply be enough to change the value of your variable. Sass supports variables as well as basic math operations and many useful functions.

The Mixins

Mixins remain the best breakthrough in terms of innovation and allow you to make your work even more efficient and faster. Mixins will allow you to reuse entire sections of CSS, properties or selectors. You can even give them arguments to create complex layouts using only one line of code!

Surely one of the most showed examples, if you have already made transitions in CSS3, the most annoying method is to rewrite each row every time for each browser. From now on you will be relieved because Sass does it for you.

The inheritance

Finished the copy / paste? Sass allows to tell a selector to inherit all the styles of another without duplicating CSS properties. Always in a simplicity and ease of use.

Another useful tools

There are many more tools that you can use, which can be found on the Sass documentation: SASS_REFERENCE.html. For example, two of the features that are very useful in web design are the functions “darken” and “ligthen” that can darken or lighten a color from a variable.

The functions and constraints of Sass
It’s all well and good, but how to set up Sass on a site? And after that, what becomes of our beautiful style sheets in .css?

For starters, you can use Sass only on Ruby’s technology.

For the issue of style sheets in .css, they are always present! Ruby automatically generates the .css file from the .sass file, which makes it possible to change nothing for browsers that will always use .css. Created css can be normal, online, or totally compressed, it’s up to you.

Sass has a framework available: COMPASS

If you want to save more time, we are advising the use of Compass, which includes a multitude of tools and mixins already programmed to make the work even easier.