CSS Preprocessors

Sean Preston
What you’ll learn today…
1. How to use a CSS preprocessor to improve your development
environment.
Introduction to CSS pre-processors
• It makes your CSS DRY (Don’t Repeat Yourself)

• Speed up development of your CSS code

• Makes your CSS code easier to maintain

• The two main CSS preprocessors are SASS and LESS

• We’ll be focusing on SASS, it’s the most common used in industry.

Sass
• Stands for ‘Syntactically Awesome Style Sheets’

• Uses the file extension .scss

• Initially Designed by Hampton Catlin and developed by Natalie

Weizenbaum

• Features: Variables, Nesting, Mixins, Inheritance, Operators and

more...
Sass SCSS

CSS Compiler
• It’s important to remember
that the user’s browser
cannot understand .scss files.
CSS
Web Server
Web Server
• Therefore, we must compile
them down to .css before
uploading to our web server. Web Server

Users Browser
Users Browser
Sass workflow
• We write our styles using Sass and CSS syntax in a .scss file(s)

• Before we upload it, we compile it to convert it from Sass back to CSS.

• Once we have a CSS file, we can upload it and use it.

• A standard web server cannot understand SASS, nor will our users
browsers!
Why do we use the .scss extension and
not .sass?
• Sass comes in two different forms (syntaxes). Both are part of the Sass preprocessor...

• The original (.sass) files use a completely different syntax to standard CSS. If, in a .sass
file you try to code standard css, it will fail to compile.

• The new (.scss) version was built to follow a more closer syntax to standard CSS. It
therefore, won’t throw an error if you use standard css rules.

• So, to clarify, you can code standard CSS in your .scss file.

• The newer version (.scss) is what it used in industry 99% of the time. It’s the one we’ll
be teaching today.
SASS OR SCSS?
• We can (and most do) refer to .scss
file as “Sass files”. We are still using
the Sass Preprocessor, although
we’re using the .scss (Ess See Ess
Ess) syntax.
SCSS Syntax
 SCSS: Variables
• Uses the ‘$’ symbol, similar to PHP 
• Best Practice to set these at the top of your .scss file or in an abstract
file (we’ll touch on this later)
$primary-color: #333; body {
$main-font: Helvetica; color: #333;
font-family: Helvetica;
body { }
color: $primary-color;
font-family: $main-font;
}
 SCSS: Nesting
• Allows you to organise your CSS code

nav { nav ul {
ul { background-color: #000;
background-color: #000; }
}
nav li {
li { color: #FFF;
color: #FFF; }
}
}
 SCSS: Mixins
• Similar in some ways to a function or a class in other languages
• Perfect for adding vendor prefixes (see example below)

@mixin border-radius($radius){ .box {

-webkit-border-radius: $radius; -webkit-border-radius: 10px;
-moz-border-radius: $radius; -moz-border-radius: 10px;
-ms-border-radius: $radius; -ms-border-radius: 10px;
border-radius: $radius; border-radius: 10px;
} }

.box( @include border-radius(10px)

 SCSS: Operators
• Now you can do maths in your CSS!!

.container { .container {
width: 300px / 960px * 100%; width: 31.25%;
} }

.box { .box {
width: 600px / 960px * 100%; width: 62.5%;
} }
 SCSS: Comments
• Comments wrapped in /* …. */ are included in your compiled CSS
code.
• Comments starting with // on each line are not.

// These comments are only one line long

/* This comment is
each.
* several lines long.
// They won't appear in the CSS output,
* since it uses the CSS comment syntax,
// since they use the single-line comment
* it will appear in the CSS output. */
syntax.
SCSS: Import
• You should split up your .scss code into multiple files.
• You can then include them (similar to how you can in PHP using
require_once) using the @import syntax.

@import themes/dark
@import font.sass
 SCSS: IF Statements
• The below IF statement will set the border to 1px solid, because 1 + 1
does equal 2 :-O.

p{
p{
 @if 1 + 1 == 2 { border: 1px solid;  }
 border: 1px solid; }
}
SCSS: Colour
• We can use darken() and lighten() to modify colours. This is especially
useful when making colours in your project a variable.

darken($color, 5%)
lighten($color, 5%)
Compiling SCSS
There are two different versions of Sass
• Ruby Sass
The original Sass engine is written using Ruby. It requires Ruby to be installed on the
system to complete the compiling process.

• LibSass
LibSass is a C/C++ port of the original Sass engine. It doesn’t rely on Ruby so can be
implemented using other languages (e.g. NodeJS - Which allows integration into
JavaScript task runners such as Grunt or Gulp). LibSass is much faster in compiling Sass
than Ruby Sass.

• Ruby Sass is still the official version. There is a delay between when an updated version
of Ruby Sass is released and when that update is released in LibSass.
How can we compile SCSS files?
• Koala
• Command Line (CLI)
• Sublime Text Plugin (SassBuilder)
• Grunt (JavaScript Task Runner)
• and more…

• It doesn’t matter how you compile it. The resulting CSS should
always look the same!
How can we compile SCSS files?
• Koala
• Command Line (CLI)
• Sublime Text Plugin (SassBuilder)
• Grunt (JavaScript Task Runner)
• and more…

• It doesn’t matter how you compile it. The resulting CSS should
always look the same!
Bootstrap Sass
• Bootstrap (like many other CSS frameworks) include SCSS files in the
framework.

• This allows us to only include the components of the framework that

we need!

• If your website doesn’t use any tabs, then why add the extra burden
to users to load styles for tab components?
 Once you have
completed the activities
in a lesson you should
work on your assignment

Activities