Sass stands for Syntactically Awesome Style Sheets. Sass is a stylesheet language that offers variables, loops, and many other features that Cascading Style Sheets (CSS). It simplifies the creation of CSS and also help to maintain large stylesheets. It is influenced by the YAML markup language.
Sass is available in two syntaxes. The original syntax, called indented syntax which uses indentation to separate code blocks and line breaks to separate directives.
In addition to the Sass syntax, Sass has the newer and now more widely used SCSS syntax (Sassy CSS). The new syntax, SCSS, uses the same block separators as CSS. Here, it is not the indentation of the source code that is decisive for the nesting of the selectors, but the curly brackets, as in classic CSS notation. Also, at the end of the rules, semicolons are required.
---
Indented syntax is a metalanguage and SCSS is a nested metalanguage, because a valid CSS is a valid SCSS without syntax changes.
SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance. SassScript is a scripting language that is used within Sass. SassScript extends Sass with features such as basic arithmetic operations, methods for manipulating color values, simple loop constructs, and case distinctions.
One of the key features is nested rules. Through these, it is easy to read and write complicated nested selectors:
1 2 3 4 5 6 7 8 9 10 11 | #header background: #FFFFFF /* -or- :background #FFFFFF */ .error color: #FF0000 a text-decoration: none &:hover text-decoration: underline |
This compiles to:
1 2 3 4 5 6 7 8 9 10 11 12 | #header { background: #FFFFFF; } #header .error { color: #FF0000; } #header a { text-decoration: none } #header a:hover { text-decoration: underline } |
