Sass is an acronym – it is short for Syntactically Awesome Style Sheets. You can probably already guess that Sass extends another acronym – CSS, or cascading style sheets. Style sheets, of course, is the language which is used to format and design HTML documents. The syntax of Sass is fully compatible with the syntax of CSS, but Sass adds some features. First, Sass includes the ability to use variables in CSS, while it also enables nested rules which makes using CSS easier to modify and more efficient overall.
CSS experts will know that one of the frustrations with using CSS is the fact that it does not support the use of variables. In practical terms that means separately defining the colour for every style, even if you have multiple styles that make use of the same colour. So, when you want to change a colour, you need to change it for every instance in which you used that colour.
Sass enables you to define a colour in a variable, and to then use that variable across all the styles you want to use. In other words, you only need to change the colour once – in the variable value, at the start of your Sass document. We include an example below.
$templateColor: #BB695C;
.pageTop { background-color: $templateColor; }
.infoText { color: $templateColor; }
.pageBottom { background-color: $templateColor; }
As we mentioned, Sass also supports something called nested rules which means that a developer can be more efficient when they write code. For example, below you will see we have used “.button” but, in this Sass example, “.button” is nested inside a style – “#top p”.
#top p {
color: #004D40;
.button { background-color: #039BE5; color: #FFF; }
}
Sass needs to be compiled. Once the above Sass code is compiled it will lead to the following output, in the shape of CSS:
#top p { color: #BB4D40; }
#top p .button { background-color: #B39BE6; color: #DDD; }
Note that, even though Sass is hugely beneficial to web developers, Sass is not in fact recognized by a web browser – Chrome and Firefox cannot read Sass code. So how does Sass code work in web pages? Well, a Sass document needs to be compiled (or converted) into CSS, which is then inserted into an HTML document which a web browser can read.
Sass can be compiled either server-side, or even before the code is uploaded to the server. Ruby and PHP scripts can ensure that Sass is compiled into CSS, alternatively developers can use apps such as Koala or even Compass.app, both of which compiles Sass before it is uploaded to the server.
with