1. 0

2. Introduction to CSS
Preprocessors
Honestly... JustSaSS
by Lucas Torres

3. Our staff

4. You can be part of our staff!
inQbation is looking for two great
developers
HTML, CSS and Js lover?You can be our nextFront-end
developer
Enjoycodingin Python, PHP and Drupal?Then the back-end
developer spotcould be yours

5. About me
Lucas Torres
Web Developer at
inQbation

6. About me
Python, PHP
HTML, CSS, JavaScript
Drupal
CrazyaboutUX and User Centered Design
Playingwith Node.js and MongoDB

7. So, aCSS preprocessor receive some instructions and compile
them to .css files
What are CSS Preprocessors?
From Wikipedia:
...apreprocessor is aprogramthatprocesses its
inputdatato produce outputthatis used as
inputto another program.

8. And what can I do with them?
Have you ever dream aboutusingthe advantages of a
programminglanguage with CSS?Well, that's whatwe are able
to do with CSS preprocessors.
Use variables, functions, mixins, and more.

9. Which one should I choose?
There are manyCSS Preprocessors

10. Which one should I choose?
I can'tcompete with more than 1 million results from Google ;)

11. Which one should I choose?
So, as with beer: Choose the one thattastes better for you

12. My personal taste is SaSS
AndinbeerisModeloEspecial;)

13. Main differences: SaSS Vs. Less
SaSS
//Variables
$main_color:#000;
//Nesting
p{
color:$main_color;
a{
text-decoration:underline;
}
}
//Mixins
@mixinshaded-box{
box-shadow:2px2px0px#000;
}
//Functions
@functionsome-function($arg){
@return$arg;
}
Less
//Variables
@main_color:#000;
//Nesting
p{
color:@main_color;
a{
text-decoration:underline;
}
}
//Mixins
.shaded-box{
box-shadow:2px2px0px#000;
}
//Functions
/*404notfound:(*/

14. SaSS superpowers
Variables
Nesting
Partials &Import
Mixings
Extend/Inheritance
Operators
And yes, functions!

15. Enough talking man, show me
the code!
Since we don'thave enough time to learn SaSS features from
basics to advanced, I'llshow the coolestones so you can research
deeper later.
Youcangoto tolearnmorehttp://sass-lang.com/documentation

16. Lets startwith asimple css like this
h1{
font-size:20px;
color:#666;
}
p{
color:#666;
}
.content{
overflow:hidden;
background-color:#F6F6F6;
}
.contenth1{
font-size:18px;
color:#333;
}
.contentp{
font-size:12px;
text-shadow:1px1px0#000;
color:#333;
}
.contentpa{
color:#666;
text-decoration:none;
}

17. Now, the same code, written in SaSS. Let's begin with variables
//Youcandefinevariables.
//BTW,commentslikethiswon'tcompileinyourCSS
$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;
}
.contenth1{
font-size:18px;
color:$secondary_fg_color;
}
.contentp{
font-size:12px;
text-shadow:1px1px0#000;
color:$secondary_fg_color;
}
.contentpa{
color:$main_fg_color;
text-decoration:none;
}
SaSS allows you to use variables, so you can stick to the DRY
principle and keep the code simple and easyto maintain.
Gisthttp://sassmeister.com/gist/9771767

18. Whataboutnesting?
/*
*Youcannestyourselectors.
*andguesswhat?
*Yes!thiscommentwillbecompiledtoyourCSS
*/
$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:1px1px0#000;
color:$secondary_fg_color;
a{
color:$main_fg_color;
text-decoration:none;
}
You can nest selectors, justas in HTML.
Make sense, right?
Gisthttp://sassmeister.com/gist/9771826

19. Talkingabouteasyto maintain, letme introduce you partials &
import
_text.scss
p{
color:#333;
a{color:#000;text-decoration:none;}
}
main.scss
@import"text";
SaSS won'tcompile anyfile with an underscore atthe beginning
(that's apartial), and the @import directive would import(duh!)
thatfile.

20. Wantso see some realaction?Ok, let's check the
Mixins

21. Mixins
Reuse instead of rewrite, thatshould be the definition of Mixins.
//DefinedeMixinproperties
@mixinshaded-box{
-webkit-box-shadow:2px2px0pxrgba(0,0,0,0.75);
-moz-box-shadow: 2px2px0pxrgba(0,0,0,0.75);
box-shadow: 2px2px0pxrgba(0,0,0,0.75);
padding:5px;
}
//ApplytheMixin
.content{
background-color:#F6F6F6;
@includeshaded-box;
}
Gisthttp://sassmeister.com/gist/9772361

22. Mixins with arguments
Theylook like functions, buttheyare not. (isn'titasuperpower?)
//DefinedeMixinproperties
@mixinshaded-box($blur,$opacity){
-webkit-box-shadow:2px2px$blurrgba(0,0,0,$opacity);
-moz-box-shadow: 2px2px$blurrgba(0,0,0,$opacity);
box-shadow: 2px2px$blurrgba(0,0,0,$opacity);
padding:5px;
}
//ApplytheMixin
.content{
background-color:#F6F6F6;
@includeshaded-box(2px,0.75);
}
Gisthttp://sassmeister.com/gist/9772390

23. Functions
No more child games!Let's use CSS as aprogramminglanguage
@functionset-background($img:false,$color:#F4F4F4)
{
@if$img!=false{
@return#{$color}url(#{$img})no-repeatlefttop;
}
@else{
@return#{$color};
}
}
.container{
background:set-background("photo.png",#000);
}
Notan usefulfunction, but.. it's afunction inside CSS!
Gisthttp://sassmeister.com/gist/9772407

24. Control Directives
I betyou saw the @if statementin the lastslide, well, there is
more for you.
//Createaquickgrid
/*Numberofcolumns*/
$columns:12;
@for$ifrom1through$columns{
.col-#{$i}{
width:(100%/$columns)*$i;
float:left;
}
}
You can use @if, @else if, @else, @for, @each and @while
Gisthttp://sassmeister.com/gist/9772438

25. Control Directives
Now, the same grid butusingafunction
@functionget-col-width($width,$columns,$number){
@return($width/$columns)*$number;
}
$columns:6;
@for$ifrom1through$columns{
.columns-#{$i}{
width:get-col-width(960px,$columns,$i);
@if$i<$columns{
float:left;
}
@else{
float:right;
}
}
}
Gisthttp://sassmeister.com/gist/9772499

26. Wait! It gets even better!
Reinventingthe wheelis notnice...
You can reuse Compass mixins, functions and more.

27. Compass
Abrief example with Compass
Gisthttp://sassmeister.com/gist/9773018
And let's proceed with some questions.

28. Questions?

29. Thank you!