0
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!