posted on 07 January 2013

0 comments

Let’s get SASSY

TAGS: SASSY,SEO,Web

SASS (Syntactically Awesome Stylesheets) originally designed by Hampton Catlin and developed by Nathan Weizenbaum.

SASS is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows as well it is an extension of CSS3 which adds:

variables

$red: #d61212;
$blue: #6874b4;
$margin: 16px;

#content{
	color: $blue;
	border-color: $red;
	margin: $margin / 2;
}

CSS

#content{ 
	color: #6874b4;
	boredr-color: #d61212;
	margin: 8px;
}

mixins

@mixin title{ 
		color: $red;
		font-weight: bold;
}

h1{ 
		@include title;
}
h3{ 
		@include title;
		font-size: 1.2em;
}

CSS

h1, h3{ 
		color: #d61212;
		font-weight: bold;
}
h3{ 
		font-size: 1.2em;
}

nested rules

li{
	display: inline;
		a{
			color: $blue;
			text-decoration: underline;
		}
}

CSS

li{ 
	display: inline;
}
li a{ 
color: #6874b4; 
	text-decoration: underline;
}

selector inheritance

.error {
  border: 1px $red;
  background: $blue;
}
.badError {
  @extend .error;
  border-width: 2px;
}

CSS

.error, .badError {
  border: 1px #d61212;
  background: #6874b4;
}
.badError {
  border-width: 2px;
}

and more. SASS generates well formatted CSS and makes your stylesheet easier to organize and maintain, especially if there is more than one stylesheet.

In SASS you use Compass (an open-source CSS Authoring Framework), and Compass will keep itself updated, and yes the prefix situation is handled for you. No more writing lines and lines of code for each browser.

SASS

#box-shadow-custom-multiple{ 
		@include box-shadow(rgba(blue, 0.4) 0 0 25px;
}

CSS

#box-shadow-custom-multiple{ 
	-webkit-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px; 
	-moz-box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px;
	box-shadow: rgba(0, 0, 255, 0.4) 0 0 25px;
}

Isn’t that cool? Awesome :)

For some reason you need to change colour ‘blue’ what you used everywhere in the site, for example: color, border, background etc.

SASS

$blue: #3bbfce;

.content-navigation{ 
	border-color: $blue; 
	color: darken($blue, 5%);
} 
.border { 
	border-color: $blue;
}

CSS

.content-navigation { 
	border-color: #3bbfce; 
	color: #2b9eab; 
} 

.border { 
	border-color: #3bbfce; 
}

Easy, just change your variable with that specific colour you want to change and Compass will do it for you whenever you used that colour. Awesome :)

How to install Sass+Compass across platform you can find out here. If you hate command line, you can use CodeKit or Fire.app. Haven’t used any of them, can’t tell what‘s better or easier to use, judge it for yourself, I'm using command line.

To read more about Sass.

More about Compass.

Ilze

Find out more about Ilze here.

0 comments

add your comment

Email me when other users reply