Sass is a kind of extension designed to simplify cascading style sheets (CSS). All those who start developing and administering websites first encounter such notions as HTML and CSS, and only after some time, having gained experience in creating style sheets, begin to understand why the Sass language is so good and convenient.
Why HTML?
HTML (or HyperText Markup Language) is a standardized language for markup documents on the web. Contrary to popular belief, HTML is not a programming language. It is used to make sure that all the elements on a page (text, drawings, tables…) are positioned correctly; it is read by a special program that everyone is familiar with – browsers (web browsers).
HTML uses tags to mark up documents which determine how and where an element will be displayed on the page.
What CSS does
CSS (or Cascading Style Sheets) is a formal language that defines the appearance of a document written using HTML.
The difference between HTML and CSS is that HTML deals with the structure of the document, while CSS deals with formatting.
Of course, HTML also has the ability to set page style, but with the advent of CSS, developers were able to
control the appearance of different pages using a single style sheet;
have more precise control over the display of the page for users.
So what is Sass good for?
Sass (or Syntactically Awesome Stylesheets) is a scripting metalanguage (i.e. a language describing another language) designed to simplify CSS files. This module is part of Haml (HTML abstraction markup language), which is used to simplify HTML.
Just as Haml compiles to HTML, Sass compiles to plain CSS styles.
Depending on the syntax chosen, Sass files can have extensions:
.sass – known as indented syntax, through which nested elements are implemented; no curly brackets;
.scss – Sassy CSS, where curly braces are used.
Because Haml was written by Ruby developers, Sass inherited a Ruby-like syntax that differs significantly from CSS. So in 2010 the SCSS syntax was presented which brought the Sass syntax closer to CSS and made it more compatible.
Each of these syntaxes has different features and advantages.
Sass Syntax
This syntax is shorter, with no brackets or semicolons, so it’s easier to type.
Indentation has a logical meaning, so it’s extremely important to watch out for it – the wrong indentation can break the style sheet. The indent at the selector block defines the nested selector. If you accidentally move an element to the right, it can suddenly become a child element of another element, greatly changing the result.
This syntax will definitely appeal to those who use Ruby or Python in their development.
SCSS Syntax
The syntax is fully compatible with CSS, so there is no need to learn it separately; it is just CSS with add-ons.
The SCSS syntax is more readable code that is easier to understand. That is why more and more developers are choosing it. Tools and plugins for Sass are developed on it.
Overall, the SCSS syntax is easier to use than Sass, so those who can’t decide should consider SCSS.
The main advantages of Sass
Using Sass provides a number of advantages that save a lot of time and effort.
Using variables
Sass gives you the ability to assign variables. Their availability determines the level of nested selectors. If they are defined outside of a nested selector, they are available globally.
Variables are useful if a single value is applied multiple times. In this case, you can use a variable to set all the necessary values at the beginning of your code and then simply refer to them. And if it is necessary to change the value of a variable, it will also change in all other places where it is set.
Nested rules
Sass allows you to nest CSS rules within each other. This makes it much easier to edit styles.
Nested rules are not only for code minimization but also for code structuring (similar to HTML).
Using Appendices
Add-ons allow you to follow the wonderful rule DRY: Don’t Repeat Yourself. Instead of copying and multiplying pieces of the same code, Sass offers to store it in a variable and then use it wherever needed. When you compile, the variable will be converted to the right piece of code.
Inheritance
Sass allows you to create a rule and then use it within another rule. This will pass all the properties of the class to the inherited element.
Sass is a useful tool that makes working with CSS very easy. It’s easy to understand, so the time spent mastering it is sure to pay off when developing a website.