Introduction to CSS Preprocessors

0

Introduction to CSSPreprocessors

Honestly... Just SaSS

by Lucas Torres

Our staff

You can be part of our staff!

inQbation is looking for two greatdevelopers

HTML, CSS and Js lover? You can be our next Front-enddeveloperEnjoy coding in Python, PHP and Drupal? Then the back-enddeveloper spot could be yours

About me

Lucas TorresWeb Developer atinQbation

About mePython, PHPHTML, CSS, JavaScriptDrupalCrazy about UX and User Centered DesignPlaying with Node.js and MongoDB

So, a CSS preprocessor receive some instructions and compilethem to .css files

What are CSS Preprocessors?From Wikipedia:

...a preprocessor is a program that processes itsinput data to produce output that is used as

input to another program.

And what can I do with them?Have you ever dream about using the advantages of a

programming language with CSS? Well, that's what we are ableto do with CSS preprocessors.

Use variables, functions, mixins, and more.

Which one should I choose?There are many CSS Preprocessors

Which one should I choose?I can't compete with more than 1 million results from Google ;)

Which one should I choose?So, as with beer: Choose the one that tastes better for you

My personal taste is SaSSAnd in beer is Modelo Especial ;)

Main differences: SaSS Vs. Less

SaSS

//Variables$main_color: #000;

//Nestingp { color: $main_color;

a { text-decoration: underline; }}

//Mixins@mixin shaded-box { box-shadow: 2px 2px 0px #000;}

//Functions@function some-function($arg) { @return $arg;}

Less

//Variables@main_color: #000;

//Nestingp { color: @main_color;

a { text-decoration: underline; }}

//Mixins.shaded-box { box-shadow: 2px 2px 0px #000;}

//Functions/* 404 not found :( */

SaSS superpowersVariablesNestingPartials & ImportMixingsExtend/InheritanceOperatorsAnd yes, functions!

Enough talking man, show methe code!

Since we don't have enough time to learn SaSS features frombasics to advanced, I'll show the coolest ones so you can research

deeper later.You can go to to learn morehttp://sass-lang.com/documentation

Lets start with a simple css like this

h1 { font-size: 20px; color: #666;}p { color: #666;}.content { overflow: hidden; background-color: #F6F6F6;}.content h1 { font-size: 18px; color: #333;}.content p { font-size: 12px; text-shadow: 1px 1px 0 #000; color: #333;}.content p a { color: #666; text-decoration: none;}

Now, the same code, written in SaSS. Let's begin with variables

//You can define variables. //BTW, comments like this won't compile in your CSS $main_fg_color: #666; $secondary_fg_color: #333; h1 { font-size: 20px; color: $main_fg_color; } p { color: $main_fg_color; } .content { overflow: hidden; background-color: #F6F6F6; } .content h1 { font-size: 18px; color: $secondary_fg_color; } .content p { font-size: 12px; text-shadow: 1px 1px 0 #000; color: $secondary_fg_color; } .content p a { color: $main_fg_color; text-decoration: none; }

SaSS allows you to use variables, so you can stick to the DRYprinciple and keep the code simple and easy to maintain.

Gist http://sassmeister.com/gist/9771767

What about nesting?

/* * You can nest your selectors. * and guess what? * Yes! this comment will be compiled to your CSS */ $main_fg_color: #666; $secondary_fg_color: #333; h1 { font-size: 20px; color: $main_fg_color; } p { color: $main_fg_color; } .content { overflow: hidden; background-color: #F6F6F6; h1 { font-size: 18px; color: $secondary_fg_color; } p { font-size: 12px; text-shadow: 1px 1px 0 #000; color: $secondary_fg_color; a { color: $main_fg_color; text-decoration: none; }

You can nest selectors, just as in HTML. Make sense, right?

Gist http://sassmeister.com/gist/9771826

Talking about easy to maintain, let me introduce you partials &import

_text.scss

p { color: #333; a { color: #000; text-decoration: none; } }

main.scss

@import "text";

SaSS won't compile any file with an underscore at the beginning(that's a partial), and the @import directive would import (duh!)

that file.

Want so see some real action? Ok, let's check the

Mixins

MixinsReuse instead of rewrite, that should be the definition of Mixins.

//Define de Mixin properties @mixin shaded-box { -webkit-box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.75); padding: 5px; } //Apply the Mixin .content { background-color: #F6F6F6; @include shaded-box; }

Gist http://sassmeister.com/gist/9772361

Mixins with argumentsThey look like functions, but they are not. (isn't it a superpower?)

//Define de Mixin properties @mixin shaded-box( $blur, $opacity ) { -webkit-box-shadow: 2px 2px $blur rgba(0, 0, 0, $opacity); -moz-box-shadow: 2px 2px $blur rgba(0, 0, 0, $opacity); box-shadow: 2px 2px $blur rgba(0, 0, 0, $opacity); padding: 5px; } //Apply the Mixin .content { background-color: #F6F6F6; @include shaded-box( 2px, 0.75 ); }

Gist http://sassmeister.com/gist/9772390

FunctionsNo more child games! Let's use CSS as a programming language

@function set-background($img: false, $color: #F4F4F4) { @if $img != false { @return #{$color} url(#{$img}) no-repeat left top; } @else { @return #{$color}; } } .container { background: set-background("photo.png", #000); }

Not an useful function, but.. it's a function inside CSS!Gist http://sassmeister.com/gist/9772407

Control DirectivesI bet you saw the @if statement in the last slide, well, there is

more for you.

//Create a quick grid /* Number of columns */ $columns: 12; @for $i from 1 through $columns { .col-#{$i} { width: (100% / $columns) * $i; float: left; } }

You can use @if, @else if, @else, @for, @each and @whileGist http://sassmeister.com/gist/9772438

Control DirectivesNow, the same grid but using a function

@function get-col-width($width, $columns, $number){ @return ($width / $columns) * $number; } $columns: 6; @for $i from 1 through $columns { .columns-#{$i} { width: get-col-width(960px, $columns, $i); @if $i < $columns { float: left; } @else { float: right; } } }

Gist http://sassmeister.com/gist/9772499

Wait! It gets even better!Reinventing the wheel is not nice...

You can reuse Compass mixins, functions and more.

CompassA brief example with Compass

Gist http://sassmeister.com/gist/9773018

And let's proceed with some questions.

Questions?

Thank you!