SASS

SASS, or the Syntactically awesome style sheets is a language for style creation originally designed by Hampton Catlin and developed by Natalie Weizenbaum. Subsequently, SASS was extended to include a simple SassScript scripting language that is used in SASS files.

SASS is one of the scripting languages used for pre-processing and are interpreted or compiled as CSS (Cascading Style Sheets). SassScript is another scripting language. Sass consists of two different syntax types.

The intended syntax and SCSS

The original syntax, referred to be the “intended syntax”, uses a syntax similar to Hamlu. It uses an indent to separate blocks of the code and a new line symbol to separate rules. The newer syntax, i.e. SCSS (Sassy CSS), uses block formatting similar to CSS. It uses brackets to separate code blocks and semicolons to separate lines within the block. The intended syntax and SCSS syntax are usually distinguished by a different filename extension .sass and .scss.

Why SASS has been created

SASS is expanding CSS by offering several mechanisms that are available in more traditional programming languages, especially in object-oriented ones. Those languages however aren’t available in CSS3. When SassScript is interpreted, is creates blocks of CSS rules for different sections as defined in Sass file. The Sass interpreter then translates SassScript to CSS. Another option is that Sass monitors .sass or .scss files and translates them into the output of the .css file whenever the file is saved.

The official Sass implementation is open-sourced and is programmed in Ruby. There are other implementations, such as Dart or PHP, as well as high-performance implementation in C which is called libSass. There is also an implementation in Java called Jsass, Vaadin has also the Sass implementation in Java. The intended syntax is metalingual. SCSS is a nested metalanguage, i.e. CSS is a valid SCSS with the same semantics. SASS supports integration with the Firefox extension called Firebug.

The advantages of using SASS

• Sass simplifies writing a clean, simple and concise CSS.
• It contains less code, so it is possible to write CSS faster.
• It is more stable, powerful and elegant than CSS, because it is its extension. It is thus easy for designers and developers to work with it faster and more efficiently.
• It is compatible with all CSS versions, so it is possible to use any CSS library.
• It is possible to use functions, such as colour manipulation, mathematical functions or other values.

The disadvantages of using SASS

• The developer must take time to learn new functionalities of the pre-processor before he can use it.
• The use of SASS may cause a loss of benefits associated with the built-in browser function for displaying the code.

The comparison with the use of CSS

• SASS is compatible with CSS. Because the SCSS is compatible with CSS syntax, it is enough to rename the file written in CSS and start using the superstructures offered by SASS.
• The possibility of using variables. Unlike CSS, SASS offers the use of variables that allow values or a set of values to be saved and then used across the entire SASS file. When compiling, the SASS then replaces all variables with the stored value. It is enough to change the value and re-compile and the whole file is updated at once.
• Use of mixin function. Mixins are like functions in other programming languages. In CSS, it is often necessary to repeat a block of code several times. By contrast, SASS allows the use of these mixins which return the value or the set of values and into which parameters can be inserted.
• Managing a large number of styles. In CSS, it is possible to search using comments or to split the file into smaller parts, but then it’s necessary to import these parts separately. By contrast, SASS allows the import rule to be applied. This rule imports a defined set of files and then creates a single CSS from it.
• Community. The community around SASS is large, but the CSS is much more widespread, therefore, there is a huge number of tips and instructions.