An Introduction to SASS – Precompiled CSS

An Introduction to SASS – Precompiled CSS

  1. An Introduction to SASS
  2. What is SASS?
  3. Variables
  4. What is SASS?
  5. Nesting
  6. Partials
  7. Import
  8. Mixins
  9. Extend/Inheritance
  10. Operators

What is SASS?

For a beginner the simple answer is that SASS is css but with variables and functions that save you time and prevent code bloat. SASS is a CSS pre-processor which means you write your code in SASS and then you compile it into useable CSS for your website. Let’s have a look at some of the useful features which SASS has that CSS currently does not.

Variables

If you have done any programming at all before then you know what a variable is. If you haven’t then a variable is like a placeholder in the computer’s memory where you can store data for later use.
Here is an example:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

There you can see two variables namely $font-stack and $primary color. A variable is always declared starting with a dollar sign ($) as you can see. The syntax in the example should look familiar to you. It’s CSS syntax except with one difference – the variables. A good thing about SASS is that if you know CSS already the switch is painless as the syntax and structure of the code is based on CSS. In fact it’s fair to say that SASS is literally just an extension of CSS. One that makes it more powerful and more efficient! If you read through the code you can see how two variables are declared at the start of the code and then used in the statements below. This is very useful for common properties such as fonts, colours and so on. This method firstly saves time and secondly makes it a lot easier to keep things uniform.

Nesting

CSS, unlike it’s sibling HTML does not nest. By nesting I mean the structure of the code has a clear visual nested hierarchy like so:

 

  • Coffee
  • Tea
  • Milk

 

That is a nested code structure. Something that css currently does not use (the one exception being media queries but for the sake of this point..!). SASS introduces nesting to your CSS coding and it looks something like this:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

Now, in a css files served via a web browser client the above code would not work. SASS is a preprocessor for CSS though meaning you write the code is SCSS and compile it into CSS. The above SCSS code when compiled into CSS would look like this:

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

nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

Can you see what is happening? Can you how the nested SCSS is compiled into non-nested, standard CSS ready for your web browser? This feature is there to save keystrokes whilst still ensuring your CSS code is properly encapsulated and not clashing with any other rules. For further reading on making the most of nesting in SASS see this fantastic article by Mario Ricalde:

http://thesassway.com/beginner/the-inception-rule

Partials

Another nifty feature of SASS is partials. Partials are separate files that contain chunks of code. The idea is that you can keep your CSS organised by keeping chunks of related code together in partials. This feature is there to make it easier to maintain your code and also easier for other people to work with it. Rather than having all of your code in one files you can have it separated into logical blocks. This is especially useful when working on a large codebase as part of a team. Partials are using with the @import method which is coming up next. I will also cover the reason why having lots of different small SASS files does not affect the overhead and the loading time of the website.A partial file name must have a leading underscore so the compiler can recognise it as such. So if you had all of the styles for your nav in one .scss file you might name it thus:_nav.scssOr your footer styling might all be in one files named thus:_footer.scssImportCSS has an import method.

So what is so new and revolutionary about the import method in SASS? It does the same thing doesn’t it? 10 points if you can tell me the problem with using lots of imports in CSS? If you just said “it increases the number of http requests and therefore affects load time.” – you’re absolutely right! SASS if you have been paying attention is a pre processor. SASS lets you have all of the benefits of importing with none of the drawbacks. Use imports to your hearts content when writing in SASS and be safe in the knowledge that you are not bring the speed of your project to a grinding halt. All of the import rules will be followed by your SASS compiler when you compile it and then you will receive one nice CSS file ready for production. I’ll give you another example here so you can see for yourself how it works. Consider the following code. Let’s say you have a base .scss file called base.scss and you want to import the two partial files we saw in the previous section, _footer.scss and _nav.scss respectively. The code would look something like this:

// base.scss
@import 'nav';@import 'nav';body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}// rest of scss rules here yada yada . . .

So what is happening here? If you’ve used CSS imports before them you will have a pretty good idea. As the compiler reads down the file it will see the @import ‘nav’; statement and look for a partial called “_nav.scss” and then do the same for the footer and then carry on until it spits out base.css with all the SCSS from all of the partials and files into one CSS file with everything in it. The one difference to note is what i pointed out earlier and that is that the browser never sees the SCSS files and this all happens before the browser meets your code. So you can have as many partials included in one files as you like and you will always only have one http request – the one for the compiled .css file.

Mixins

If a variable is like, well, a variable then a mixin is a bit like a function. Some parts of CSS, especially CSS3 are very tedious, repetitive and generally boring to write, For example:

border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px

Writing that every time you want to use it is not a very good use of your time, is it? A Mixin is can store whole CSS statements and even let you pass in variables for example:

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

Can you guess how the above code works and what the output will be? Here it is:

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

So what is happening? Well:

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Is declaring the mixin and then:

.box { @include border-radius(10px); }

Is using it by passing in a parameter of 10px just like you would pass a parameter into a function in say javascript for example. Have a look at the following link for some more examples if you are not sure or even just to get an idea of what it can do for you:

http://w3bits.com/sass-mixins/

Extend/Inheritance

Extend is a very useful feature in SASS. What it does is allow you to take on css statements and modify it or extend it for use with a variation of the base component you are working on. Consider the following code example:

.message { border: 1px solid #ccc; padding: 10px; color: #333;}
.success { @extend .message; border-color: green;}
.error { @extend .message; border-color: red;}
.warning { @extend .message; border-color: yellow;}

Message boxes are a good example of a single component for which you might need slightly different styles. For example green for success, red for a warning and so on. Using @extend you can quickly and efficiently write the css for new classes for components to tweak the style. This clever method of coding will prevent you from needing multiple class names per HTML element while also negating code bloat. Again you will save time writing it in SASS too. This might not seem like a lot of time saves but multiply that by every stylesheet you write in a year then multiply that by a team of 10, 50 or 100+ developers and you can see the benefit.

Operators

Operators throw maths in to the CSS mix and the result is an extremely versatile and powerful feature.

References:
Sass Basics
http://sass-lang.com/guide
Nested selectors: the inception rule

http://thesassway.com/beginner/the-inception-rule

Read the latest car news and check out newest photos, articles, and more from the Car and Driver Blog.

Share this post

Leave a Reply

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