CSS Preprocessor: Why and How

M. Mizanur Rahman

A love letter from CSS

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 csswe’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