Web Development & Execution
Gerry Shannon
by Gerry Shannon
share this
?fl
« Back to the Blog

Develop Style Sheets with Sass

12/26/2013
Develop Style Sheets with Sass

Object-oriented coding comes to CSS with Sass (Syntactically Awesome Stylesheets). Having added features like variables, functions and arguments, style sheets are now easier to maintain, have a sense of efficiency and provide re-usable elements. These are desired attributes when producing any computer program. Now a coder can develop CSS in a way that doesn't just concern itself with what the style sheet is doing, but how well it does it.

Sass is CSS3 compatible. The Sass compiler is written in Ruby so you will need Ruby installed on your computer in order to start using Sass. There are some alternative compilers out there. Here is a discussion about alternative compilers and using Sass without Ruby.

 

Variables

Variables are a key component to easily maintaining a program. In a current CSS style sheet, if 3 elements share the same background color, then that attribute has to be stated in each element.

 

.one {
	background-color: #00FF00;
}

.two {
	background-color: #00FF00;
}

.three {
  	background-color: #00FF00;
}

In order to update the site wide background colors, each element has to be changed. In Sass, a variable can be set.

$color: #00FF00;

.one {
	background-color: $color;
}

.two {
	background-color: $color;
}

.three {
	background-color: $color;
}

This is a much more efficient way to update your style sheet.

 

Nesting

Nesting code blocks will display a cleaner, more elegant code. Logical nesting is supported by CSS, however, the code itself is not nested.

 

div {
	padding:10px;
}

div ul {
	padding-left: 30px;
}

Notice the nested 'ul' (unordered list) within the 'div' has it's own added padding-left. Two CSS elements had to be created in order to generate this attribute. Sass can nest the 'ul' block within the 'div' block.

div { 
	padding:10px;
	ul {
		padding-left: 30px;
	}
}

 

Mixins

Sass implements the concept of mixins. In an object-oriented language, a mixin is a class that contains a combination of methods from other classes. Translated to CSS, a mixin is a block that contains elements of other blocks. In CSS, a coder might find that s/he is using the same attributes multiple times.

header {
	font-family: comic sans ms;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	font-size: 18px;
}

footer {
	font-family: comic sans ms;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	font-size: 12px;
}

Take note that the only difference between the 'header' and the 'footer' is the font-size attribute.  With Sass, a developer can write a mixin to allow for usability and easy maintenance.

@mixin mix {
	font-family: comic sans ms;
	font-weight: bold;
	text-align: center;
	padding: 15px;
}

header {
	@include mix;
	font-size: 18px;
}

footer {
	@include mix;
	font-size: 12px;
}

 

Arguments

Alternatively, Sass mixins support arguments, making this a powerful tool for usability, maintenance and efficiency.

@mixin mix ($size) {
	font-family: comic sans ms;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	font-size: $size;  
}

header {
	@include mix (18px);
}

footer {
	@include mix (12px);
}

 

Inheritance

Sass development implements inheritance. In object-oriented languages , inheritance is passing the elements of one class to another, then allows that inherited class to take on its own features. For instance, a class 'Secretary' would inherit the class 'Employee'. If 'Employee' has attributes Age and Salary, then 'Secretary' also has Age and Salary, plus perhaps added attributes like Words-Per-Minute. CSS inheritance looks something like this.

.employee, .secretary, .engineer {
	font-family: comic sans ms;
	font-weight: bold;
	font-size: 20px;
}

.secretary {
	color: #00FF00;
}

.engineer {
	color: #00FFFF;
}

Using the 'extend' keyword, this inheritance can be seen more clearly. Code is more elegant, maintainable and usable.

.employee {
	font-family: comic sans ms;
	font-weight: bold;
	font-size: 20px;
}

.secretary {
	@extend .employee;
	color: #00FF00;
}

.engineer {
	@extend .employee;
	color: #00FFFF;
}

 

Operators

Operators are very useful in a program.  They provide dependable and efficient outputs.  With so much of web development moving toward responsive designs, this can be very valuable.  Let's assume we have a website with a width of 1280px.  Within a page, there are two columns, 400px, and 880px. The CSS might look something like this.

.wrapper {
	width: 1280px;
	margin: 0 auto;
}

.content {
	width:880px;
	float: left;
}

.ads {
	width:400px;
	float: left;
}

@media only screen and (max-width: 1279px) {
	.wrapper {
		width: 960px;
	}

	.content {
		width:660px;
	}

	.ads {
		width:300px;
	}
}

In the above example, we set a break point for a 960px content width when the screen size is below 1280px. As you see, we needed to figure out the equivalent preportions and set each element in that break point. With operators, that work can be done for us.

.wrapper {
	width: 1280px;
	margin: 0 auto;
}

.content {
	width: 880px / 1280px * 100%;
	float: left;
}

.ads {
	width: 400px / 1280px * 100%;
	float: left;
}

@media only screen and (max-width: 1279px) {
	.wrapper {
		width: 960px;
	}
}

Since .content and .ads are figured to a percentage of the total width, then the preportions will remain in tact upon entering the break point. Use variables for the width and really have some fun.

 

Wrap-up

There are some other great features in Sass like color funtions, loops, and imports. Do some research and start playing. Style sheets are becoming more complex but CSS can still be fun.

Give your CSS some "SASS." Mix and match these features to make efficient code that is easy to maintain, durable and re-usable. Troubleshooting your style sheet with a browser web developer tool (like Firebug) will prove to be more difficult as you will be inspecting the compiled CSS file and not the original Sass file.  For those fellow Firebug fans out there, look into FireSass as a new development tool in your arsenal.

LESS and Stylus are two other CSS pre-processors that have been influenced by Sass. The syntax of these languages is very similar to that of Sass. Compare them in this article written by Net Tuts+.

The above examples use the SCSS syntax.

Useful Links

Sass: CSS with superpowers

Sass - Wikipedia

CSS Media Types - W3Schools

FireSass

Sass vs. LESS vs. Stylus

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×