SASS


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
http://glynrob.com/examples/scss/index.html

which can be downloaded at
https://github.com/glynrob/SCSS

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.

compiles to

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.

Running Sass

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.

Windows Installer
http://rubyinstaller.org/downloads/
Or if you do not want to use the command line use Scout

Linux or Mac Compiler
Install Guide

HTML Code

Your html is as you normally would build your page.
My example is just 3 buttons on a page

Variables

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.

Mixins

@mixin border-radius ($radius: 5px) {
  -webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}
.btn{
  @include border-radius(10px);
}

These are like functions in javascript
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.

Nested Rules

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.

Function options

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

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *