CSS preprocessor: why and how

CSS Preprocessor:
Why and How
M. Mizanur Rahman

Frustrations with CSS
• It looks messy
• Repetitive
• Tendency of copy pasting over and over
• Big chunk of codes
• Vendor specific prefixes
• Not DRY Enough

What if CSS gets a new look
• It becomes re-usable
• It becomes scalable
• It becomes smart
• It understand a programmers mind

What is a Preprocessor?
• Have you heard the word “Preprocessor” for first time?
• CSS preprocessors take code written in the preprocessed
language and then convert that code into the same old css
we’ve been writing for years
• Preprocessors are not CSS, so CSS weaknesses do not belong
to them
• At the end, the output will be pure CSS files. So it does not
matter what Preprocessor you use in your project

Some Popular Preprocessors
• SASS
• LESS
• Stylus

Which one to Choose
• 80% of the SASS, LESS and Stylus are same
• 20% are different based on their advanced features and usage
• The similar features are
• Variables
• Color Transformation
• Mixings
• Nesting
• Loops and conditions
• Import

Let’s Focus on SASS
• SASS - Syntactically Awesome StyleSheets
• Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline
imports, and more, all with a fully CSS-compatible syntax.
• Features
• Fully CSS3-compatible
• Language extensions such as variables, nesting, and mixins
• Many useful functions for manipulating colors and other values
• Advanced features like control directives for libraries
• Well-formatted, customizable output
• Firebug integration

SASS or SCSS??
• There are two syntaxes available for Sass.
• First and latest one known as SCSS (Sassy CSS) and is an extension of
the syntax of CSS3. This means that every valid CSS3 stylesheet is a
valid SCSS file with the same meaning.
• Files have .scss extension
• It uses brackets and semi-colons just like CSS
• Easy to pickup by the developers
• SASS is the old style syntax.
• Focus on indented syntax
• Have .sass file extension
• Not so well picked by developers for different syntax from CSS

SASS & SCSS samples
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
H1
color: $primary-color
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
H1 {
color: $primary-color;
}

How to Install SASS
• Requires Ruby to be installed on developer machine (Not
server)
gem install sass
sass -v
You can also use the following applications
• Compass
• Koala
• Scout

SASS Features: Variables
• Starts with $ sign
• allows you to assign a value to an easy-to-
remember placeholder name
• Allows:
• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes
(e.g. "foo", 'bar', baz)
• colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas
(e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps from one value to another (e.g. (key1: value1,
key2: value2))
$width: 5em;
#main { width: $width; }
.label {font-size: $width;}
Converts to
#main {width: 5em; }
.label {font-size: 5em; }

Nesting
/* -- scss -- */
$background: #f0f0f0;
#navbar {
width: 100%;
height: 30px;
padding: 10px;
background: $background;
ul {
list-style: none;
}
li {
float: left;
a { text-decoration: none; }
&:hover { text-decoration: underline; } }
}
/* -- resulting css -- */
#navbar {width: 100%; height:
30px;padding:10px; background:
#f0f0f0}
#navbar ul {list-style: none;}
#navbar li {float: left;}
#navbar li a {text-decoration: none;}
#navbar li a:hover {text-decoration:
underline;}

Interpolation
• You can also use SASS variables in
selectors and property names using
#{} interpolation syntax
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
Outputs
p.foo { border-color: blue; }

Operations
• Number Operations
• Color Operations
• String Operations
• Boolean Operations
• List Operations
• Parentheses
$navbar-width: 950px;
$items: 5;
#navbar li {
width: $navbar-width/$items - 10px;}
p { color: #010203 + #040506; }
p { cursor: e + -resize; }
p { width: 1em + (2em * 3); }
--------------------- Output ------
-----------------
#navbar li {width: 180px}
p { color: #050709; }
p { cursor: e-resize; }
p { width: 7em; }

Mixins
• Mixins allow you to chunk up CSS
declarations (block of rules) to be reusable
with one reference
• Mixins are included in the document with
the @include directive. It also takes optional
arguments.
@mixin rounded-corners {
$radius: 5px;
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius; }
#header { @include rounded-corners; }
#footer { @include rounded-corners; }
---------------- Output ------------------------
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Mixins (With Argument)
@mixin my-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed; }
}
p { @include my-border(red, 1px); }
p {
border-color: red;
border-width: 1px;
border-style: dashed;
}

Converting SASS files to CSS files
sass input.scss output.css

Partials & Imports
• Divide a big SASS file to
smaller SASS files
• Start with a underscore
_example.scss
• Can be reused in different
projects (eg: _table.scss,
_form.scss etc)
• When converted to CSS,
partials files are not
generated to any css files.
• @import “form"; will
import _form.scss

Extend/Inheritance
• One of the most important feature of SASS
• @extend lets you share a set of CSS properties from one
selector to another
• It helps to prevent repetition in our SASS files.
.message {
border: 1px solid #ccc;
padding: 10px;
color: #444; }
.success {
@extend .message;
border-color: green;}
.error {
@extend .message;
border-color: red; }
.warning {
@extend .message;
border-color: orange; }
-------------- Output -------------------------
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #444; }
.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: orange; }

Looking for More?
• Go through SASS based frameworks
• Compass
• Bourbon
• Susy
• OOCSS (Object Oriented CSS)
• There are some great paid apps for SASS
• CodeKit
• Hammer
• Mixture
• LiveReload
• Prepros

About Me 
M. Mizanur Rahman
Development Manager, TrustPilot Bangladesh
GraphicPeople
Moderator PHPXperts
Email: mizanur.rahman@gmail.com
Blog: http://booleandreams.wordpress.com

CSS preprocessor: why and how

More Related Content

What's hot (20)

Similar to CSS preprocessor: why and how (20)

Recently uploaded (20)

CSS preprocessor: why and how