Last updated on July 22, 2016
What is Sass?
Sass stands for Syntactically Awesome Style Sheets.
Sass is a Cascading Style Sheet (CSS) preprocessor. It is a scripting language in which you can use features such as:
- inheritance
- variables
- functions
- lists and more…
File extension:
Sass files can contain the file extension .sass or .scss. The differences between the two file types, lies in the variation of syntax. We will be looking at SCSS (Sassy CSS) in my walkthrough’s as it is the file type I started with. the .sass file type was the originally intended syntax for Sass, though due to it’s lack of similarity with CSS it was a bit of a turn off to learn a whole new language. The necessity to learn the new language presented a potential hurdle when it came to increasing adoption rates.
At this point you may be thinking SCSS must have addressed all of these concerns. In which case you would be correct! The SCSS syntax is a superset of CSS, as such anything you can do in CSS you can do in an SCSS file. Due to this characteristic of a SCSS file, you are allowed to write vanilla CSS and it would work! The SCSS syntax is structured to resemble that of CSS Syntax. Let us dive into our first exploration of Sass variables, though if you would like to learn more about the .sass vs .scss please checkout the following link which I found useful: thesassway.com.
Setup:
While we will not be going over setting up your local machine for Sass in this post, I will provide a web-based tool. One tool I like to keep in my arsenal is http://www.sassmeister.com, this is an awesome tool! With sassmeister you can write sass in .scss or .sass syntax in the left pane, and see the compiled CSS on the right. This is an amazing tool when you are looking to quickly prototype an idea, or when you are learning how to utilize one of Sass’s many features.
Sassmeister
^As you can see in the image above, sassmeister allows you to choose which version of Sass you are utilizing, as well as which Syntax you are using.
First Sass Example:
As you can see in the above image, on the left pane I wrote some Sass, while on the right pane vanilla CSS is instantly displayed. This first example is one which demo’s the use of variables in Sass.
Variables in Sass:
Variable’s are declared similar to CSS properties with a ‘$’ at the beginning of the variable name. In the example above I have declared a variable named ‘bg-color’, the preprocessor will identify the variable by the ‘$’, and store its value after the ‘:’ as its value:
You will notice that the class looks just as it would in CSS with the exception of the insertion of the variable, where the property value would normally lie:
So what??
The beauty of allowing the use of variables in the creation of CSS, lies in the maintainability of the CSS. Let us say you have written an app for sport’s teams. Each team’s page will be for the most part identical with the exception of perhaps the team logo, or the teams colors as the page/web-app theme. With Sass you simply place the variable references inside of the various classes which make up the page look and feel, then update the variable values to give the page a completely different look! Writing your CSS in Sass, enables you to reduce your logic whenever possible and allows you to write DRY (Don’t Repeat Yourself) CSS. We will dive further into other examples of Sass in later continuations of this Sass series.
Until Next time!