Insights

More on SASS - features and basic coding

More on SASS - features and basic coding

In the previous SASS article “Setting up for SASS” we discussed setting up a UI solution for compiling SASS. Now that it’s working we can start getting our hands dirty, and learn some of the syntax required to code in SASS instead of regular CSS.

If you don’t have the time or the administrator rights required to install additional programs and get SASS set up locally, you can still try out some of these snippets of code by using SassMeister, over at http://sassmeister.com/

Variables

We’ll look at variables first of all. As mentioned in the previous articles, SASS allows us to introduce variables to our styling. Below is an example:

$main-font: Verdana, Geneva, sans-serif;
$primary-color: red;
$secondary-color: blue;

body {
font: 100% $main-font;
background-color: $primary-color;
color: $secondary-color;
}

$main-font, $primary-color and $secondary-color are the variables we’re setting up here. We’re then assigning the value of elements within the body to be equal to the variable values we created.

The above SASS spits out the following CSS:

body {
font: 100% Verdana, Geneva, sans-serif;
background-color: red;
color: blue;
}

Super simple, right? It may seem a little long winded to write twice as many lines of SASS as the final CSS output, as in this example. However, when you think about it, variables only need to be set-up once and can be reused over and over. $main-font could be applied to all headers on the site, or on blockquotes, $background-color could be set across multiple divs, $secondary-color could be set on every border on the website and so on.

Import

Import is a very simple function. It allows us to quickly and easily import one scss file for inclusion in the SASS processing, so that it will end up as part of the final CSS file that’s output.

@import ‘reset’;

This would automatically find a file called “_reset.scss” located within the SASS folder. You can import multiple different SASS files, but still just output one final CSS file.

This is helpful for keeping things modular. By separating out some of your different SASS files you can keep certain elements self contained; your style reset, typography, grids, buttons etc. It makes updating styles at a later date much easier.

Nesting

Nesting is another simple concept, that can be incredibly handy in certain situations. Here’s the SASS:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {

.special {color:red;}

display: block;
padding: 5px 10px;
text-decoration: none;
}
}

Stop a second. Can you guess from the code above how this will be output in CSS?

Try and figure it out without scrolling down.

Ok, here it is:

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;

nav a {
display: block;
padding: 5px 10px;
text-decoration: none;
}

nav a .special {
color: red;
}

As you can see above, nesting one element inside another allows us to associate the child element styles to the parent.

This means if we set a basic paragraph style with a green font colour, it will never take priority over a paragraph set to be red in colour which is located within a parent. Nesting an element not only helps readability, but ensures additional specificity, and in CSS increased specificity means increased priority for that rule.

Operators

Operators allow us to process calculations within our SASS. This can be implemented in a number of different ways, but here’s a quick example:

$paragraphText:14px;

.subTitle {
font-size:$paragraphText +2;
}

This will output .subTitle’s font-size to be 16px, cool huh?

Mixins

I briefly mentioned mixins in the original SASS article

Extends

Extend allows us to share a set of CSS properties between multiple elements, avoiding repetition:

.modal {
border: 1px solid #999;
padding: 8px;
color: #000;
}

.success {
@extend .modal;
border-color: green;
}

.error {
@extend .modal;
border-color: red;
}

.warning {
@extend .modal;
border-color: orange;
}

This will then output as the following:

.modal, .success, .error, .warning {
border: 1px solid #999999;
padding: 8px;
color: #000;
}

.success {
border-color: green;
}

.error {
border-color: red;
}

.warning {
border-color: orange;
}

That about covers it for the main features of SASS! Not too scary, eh? If you’d like to learn more, make sure you visit the official SASS website at http://sass-lang.com/

More tech articles from Exact Abacus will be coming soon!

by Paul Devine on 15/12/2014

Please sign in to write a review
Forgot your password?
keyboard_arrow_up