Sass (stylesheet language)

Sass ( syntactically Awesome Style Sheets) is a style sheet language that facilitates the generation of a preprocessor Cascading Style Sheets. It was originally influenced by the YAML markup language, designed by Hampton Catlin and developed by Nathan Weizenbaum.

After completion of the initial version of Weizenbaum sat with Chris Eppstein work on Sass continued and implemented with Sass scripts a simple scripting language for use within Sass files. In addition to the command line based compiler software available under the MIT License for many platforms by further processing programs have been established.

• 2.1.2 SCSS

Features

Nested rules

One of the key features are nested rules (nested rules). By this it is easy to read complicated nested selectors and write.

# header    background: # FFFFFF    / * -Or-: background # FFFFFF * /     . error      color: # FF0000      a      text- decoration: none      &: hover        text-decoration: underline This is compiled to:

# header {    background: # FFFFFF; } # header. { error    color: # FF0000; } # header a {    text- decoration: none } # header a: hover {    text-decoration: underline } Nested Media Queries

A nice feature is the incorporation of media queries in selectors dar. So style declarations for one and the same element at the same location can be managed in the source code.

# header {    color: red    @ media (min -width: 400px ) {      color: blue;    } } This is compiled to:

# header {    color: red; } @ media (min -width: 400px ) {      # header {        color: blue;      }    } variables

Sass allows the use of variables. This makes it easier to hold certain values ​​consistent in extensive style sheets. Maintenance tasks are greatly simplified by the definition of the variables at a central location.

$ link_color: # 00F   a    color: $ link_color Is compiled to

A {    color: # 00F } mixins

Mixins allow the repeated referencing of entire sections of code. Based on the present in classical programming functions mixins can also be passed arguments. Mixins, as normal instructions also contain additional nested selectors. In the following example, the variable $ color is assigned to the item as the background color in the mixin.

@ mixin box ( $ color ) {    padding: 1rem;    border: 2px solid gray;    background: $ color;    chip      font- style: italic; }   a    @ include box (red ); Is compiled to

A {    padding: 1rem    border: 2px solid gray    background: red } SCSS syntax

In addition to the above-described Sass syntax ( indented syntax ) Sass has the newer, and more common today SCSS syntax ( Sassy CSS). Here's to the nesting of selectors not to indent the source code crucial, but as in the classical CSS notation, the curly braces. Furthermore, semicolons at the end of rules needed again.

Code comparison

$ my color: # 3BBFCE  . navigation    border-color: $ color my    color: darken ($ my color, 9%) SCSS

$ my color: # 3BBFCE;  . navigation {    border-color: $ color my;    color: darken ($ my color, 9%); } The compiled CSS is identical in both cases. An automatic conversion between the two syntax variants is possible without problems.

Criticism

The use of a meta-language for CSS is not without controversy. It is criticized the more difficult debugging and expand the potential sources of error. Nor was the Kaskadierungsgedanke lost of CSS, which is given to the award of classes. It is also within the SASS file is not always a difference between regular CSS classes and mixins to detect.