This is a brief overview and example of how Sass works
To see the original documentation go to http://sass-lang.com/
My working example is
which can be downloaded at
How Sass works:
Sass is an extension of CSS3. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin
Though the syntax is similar to Less CSS, it is written in Ruby so does require Ruby to be installed.
Sass allows you to shorten the CSS code that you write allowing you to reuse allot of the styles you have made again and again.
Also note that there are 2 syntax methods.
SCSS (for “Sassy CSS”) is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
SASS is known as the indented syntax. It’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Use the extension .sass.
There is no functional difference between them. Use the syntax you prefer.
My examples use SCSS.
Unlike LESS CSS, the style.css file is generated as you develop so there is no need to change anything in your code when deploying live.
Linux or Mac Compiler
Your html is as you normally would build your page.
My example is just 3 buttons on a page
When designing a website, the colours used are always slightly off the default html color options.
Red is something like: #BF3130 for example.
When adding new elements to the website you have to look back to find the actual hex value you are using to keep consistent.
Variables allow you to set these in the CSS and call upon them when required.
You add a function name and can pass variables to it.
This way you can call this mixin on any classes you wish and cut down your code allot.
This example allows me to add 1 line to any class to add a border radius to that class supporting cross browser.
This allows you to write clean code so you can easily see what styles are being added to child styles.
So instead of
You can write
Clearly showing that hovering over an A tag would change the color of the text.
You can do this for any classes as many times as you would like.
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html for a full list of functions available
My example only uses desaturate for the sake of an example in my code.
So you commit and push your code updates live.
As simple as that.
Hope this help you get started with SASS