Development

So maybe you’ve heard of this thing called SASS? Maybe you know about it already and you can rock the functions like a sassy master?

For the readers who don’t know what I’m talking about, or from a client’s point of view, I would encourage you to consider how the web development process can affect your expectations as well as the experience of your website’s users. Either way, I’m about to share with you why I think it’s the best thing since Star Wars. Say What?

For those not familiar with front end web development, SASS and CSS might just be some of those buzz words you’ve been hearing about, but they are vital to the behind-the-scenes development process that makes a beautiful and responsive website work.

What is Sass?

SASS (Syntactically Awesome Style Sheets) is a relatively new programming language specifically created for front end web development that defines a new set of rules and functions to empower and enhance CSS. With this new programming language, you can create complex designs with minimal code in the most efficient way possible. It brings with it a variety of enhancements and efficiencies that extend the powers of CSS, such as variables, partials and functions. These are just some of the reasons that make SASS super awesome!

To go back a little; CSS, or Cascading Style Sheets is a style sheet language, designed to facilitate the separation of design from content. Content can be served using a variety of other languages, such as static HTML or dynamic PHP (and numerous others) and it’s most commonly styled (or designed) using CSS.

You can boil it down to a set of rules, where you specify a target element and set or change the properties of that element. For example a button can have a border and by using CSS you can specifically and precisely control the style, thickness or colour of the border, and then while you’re at it change the background colour and text colour of the button in just three lines.

A CSS example:

[pastacode provider=”manual” lang=”css” highlight=”2,3,4″]

.button {
	border: solid 3px black;	// Button border style
	background-color: grey;		// Button background colour
	color: white;			// Button text colour
}

[/pastacode]

So how is SASS different from CSS then?

sass-small

To start off with, SASS IS CSS, just with magic added. You can still write normal CSS in SASS, and it works fine. In fact, when you code in SASS, the files get processed into a standard CSS file… (dramatic pause)… That’s where special software steps in to do all the “pre-processing” that turns all the magic in the SASS code into one all-encompassing CSS file that all the browsers know and understand.

The Great Things

So, from a code geek’s point of view, some of the best things in SASS are actually the simplest ideas, almost begging the question as to why they weren’t there in the first place.

I’ll try to explain a few of the coolest features of SASS and what they might mean to you and your website.

Nesting

The first feature that makes the biggest impact on a web developers workflow is the SASS syntax for code nesting and indentation. With regular CSS, each element is changed independently in “declaration blocks”, which if you can imagine would be like having a room full of different sized boxes all over the floor. With SASS however you can group related elements together in nested blocks and  you can start putting some of those smaller boxes inside the bigger boxes so you can see your floor again.

[pastacode provider=”manual” lang=”sass”]

.header {
	background-color: grey;
	padding: 10px 15px;
	.navigation {
		border: solid 1pc black;
		a {
			text-decoration: underline;
			padding: 10px;
		}
	}
	.social-buttons {
		background-color: red;
		float: right;
		a {
			color: white;
			margin-right: 5px;
		}
	}
}

[/pastacode]

Now, it might not seem like such a big deal, but once you get used to writing code like that, there’s no going back. So how does this improve the process?

It’s really all in the logical organisation of design elements that results in a more consistent visual treatment that’s thousands of times easier to build and maintain.

Anything that makes it easier to find and fix errors somewhere amongst hundreds of lines of code makes a tremendous difference.

So, there’s one point for design integrity and a happy client.

Variables

My personal favourite though is variables. Most programmers would know how useful, if not critical, they are to the foundation of any piece of code. It is essentially a named container for information that can be reused across a programming project.

The best example would be colours.. If you want to maintain the integrity of your colour scheme, you could store your colour values in variables to use across the site design. You can also use them to store other commonly used values, such as font names, padding values and sixes, or anything you might want to easily change again later. Variables make web development faster and easier, as well as ensuring the greatest level of re-suability and consistency across a design project.

[pastacode provider=”manual” lang=”sass”]

// Functional: Structure Variables
$pageWidth: 100%;
$containerWidth: 960px;

// Descriptive: Colour Variables
$grey: #E3E3E3;
$blue: #1f605b;
$white: #FFFFFF;
$black: #000000;

[/pastacode]

Being able to use variables in a site design (in this case your style sheet) provides numerous benefits to the client. The most notable being design consistency by being able to control exactly which colours are used where and avoiding having twenty different shades of blue strewn across the site.

The second most useful benefit is in the design process where the final colour scheme might still be tweaked or altered, or when a client changes their mind from blue to pink. It’s easy to go to one place in your style sheet and change a variable to instantly change the colour across the whole site. There are numerous other ways to use variables, but I think you get the point.

Partials

Another great way that SASS helps you keep things organised is by using a system of partials. There is basically a way to organise the style sheet into various different parts (or partials) and use (or import) them only as needed.

By splitting up your style sheet into different parts, such as  the header or footer, it becomes instantly more efficient and maintainable. If you go a bit further, you could split up your files into reusable modules that you can move around anywhere such as navigation, articles or buttons.

[pastacode provider=”manual” lang=”markup”]

// Reset, Variables, Mixins, Global Settings,
@import "variables";
@import "helpers/mixins";
@import "helpers/normalize";
@import "helpers/global";

// The SITE incl. Global Elements Styles
@import "site";
@import "credits";

[/pastacode]

So how do partials help you?

Well, technically it helps me, which then helps you. Partials are really only there to make the SASS designer or coder’s life easier by being able to organise your project into logical parts that can be reused, moved, removed or edited in a way that makes sense to the designer. It’s much easier to maintain a larger project with well organised partials, and has been proven to prevent hair loss among many developers.

Mixins

Now for the meaty stuff.

Another great feature of SASS is the ability to create and use your own mixin in your projects that can help the designer save a lot of time and lines of code. Mixins are little smaller pieces of code (similar to partials) that you can reuse anywhere across your design project by including them where needed.

Where the power in mixins come from is the ability to use variables at the same time in order to change the code that it produces. A great example would be for creating rounded corners on buttons. By using a pre-designed mixin that contains all the code necessary to create rounded corner borders, you can pass through a value to be used in a variable inside the code that would change the radius of the corner.

[pastacode provider=”manual” lang=”sass”]

// Border Radius Mixin
// Use as: @include border-radius(10px);
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-khtml-border-radius: $radius;
	border-radius: $radius;
}

[/pastacode]

While the effects of using mixins aren’t always apparent, they nonetheless provide a valuable service to the design of your website. When used correctly, they can assist the designer in maintaining browser compliant code for more complicated browser and vendor prefix requirements, such as border effects, transparent backgrounds, CSS3 animations and various others.

With one line of code from the designer, your beautiful glowing yellow buttons that swoosh away when you click them will work wonderfully across as many of the different browsers and devices out there as possible.

Other things

There are quite a few other things that make SASS super useful and worth mentioning.

The first would be being able to use maths functions in your style sheets. This is great for doing clever things to create different sized grid columns, or even divide numbers in variables for more dynamic responsive designs.

Another great example would be the humble parent selector – the ampersand – which allows the designer to create special rules connected with the selector elements such as the hover states on links in a nested code layout.

There are numerous other great features in SASS that make it awesome, such as hidden comments, placeholder selectors, data types, colour operations, variable defaults, extends, control directives (such as if, for or while) etc.

If you are interested in reading up about it, have a look at the official SASS site at www.sass-lang.com

Whoa… So that a lot of SASS awesomeness. Working with normal CSS now feels like playing an 8-bit Gameboy when I could be rocking out on a PS3. The bad analogy aside, SASS has definitely overshadowed both the functionality and efficiencies that the original introduction of CSS in web design provided.

SASS has opened a whole new dimension to the development process, bringing with it amazing behind-the-scenes enhancements that ultimately benefit the website users, which in turn makes our clients happy.

 

Image credit: Gabriella DiBenedetto, https://flic.kr/p/9ahd6w

Get the latest INSIGHTS

Sign up to the Dando newsletter and we'll send you the download link right now.
  • This field is for validation purposes and should be left unchanged.