0
Introduction to CSS
Preprocessors
Honestly... JustSaSS
by Lucas Torres
Our staff
You can be part of our staff!
inQbation is looking for two great
developers
HTML, CSS and Js lover?You can be our nextFron...
About me
Lucas Torres
Web Developer at
inQbation
About me
Python, PHP
HTML, CSS, JavaScript
Drupal
CrazyaboutUX and User Centered Design
Playingwith Node.js and MongoDB
So, aCSS preprocessor receive some instructions and compile
them to .css files
What are CSS Preprocessors?
From Wikipedia:...
And what can I do with them?
Have you ever dream aboutusingthe advantages of a
programminglanguage with CSS?Well, that's w...
Which one should I choose?
There are manyCSS Preprocessors
Which one should I choose?
I can'tcompete with more than 1 million results from Google ;)
Which one should I choose?
So, as with beer: Choose the one thattastes better for you
My personal taste is SaSS
AndinbeerisModeloEspecial;)
Main differences: SaSS Vs. Less
SaSS
//Variables
$main_color:#000;
//Nesting
p{
color:$main_color;
a{
text-decoration:unde...
SaSS superpowers
Variables
Nesting
Partials &Import
Mixings
Extend/Inheritance
Operators
And yes, functions!
Enough talking man, show me
the code!
Since we don'thave enough time to learn SaSS features from
basics to advanced, I'lls...
Lets startwith asimple css like this
h1{
font-size:20px;
color:#666;
}
p{
color:#666;
}
.content{
overflow:hidden;
backgro...
Now, the same code, written in SaSS. Let's begin with variables
//Youcandefinevariables.
//BTW,commentslikethiswon'tcompil...
Whataboutnesting?
/*
*Youcannestyourselectors.
*andguesswhat?
*Yes!thiscommentwillbecompiledtoyourCSS
*/
$main_fg_color:#6...
Talkingabouteasyto maintain, letme introduce you partials &
import
_text.scss
p{
color:#333;
a{color:#000;text-decoration:...
Wantso see some realaction?Ok, let's check the
Mixins
Mixins
Reuse instead of rewrite, thatshould be the definition of Mixins.
//DefinedeMixinproperties
@mixinshaded-box{
-webk...
Mixins with arguments
Theylook like functions, buttheyare not. (isn'titasuperpower?)
//DefinedeMixinproperties
@mixinshade...
Functions
No more child games!Let's use CSS as aprogramminglanguage
@functionset-background($img:false,$color:#F4F4F4)
{
@...
Control Directives
I betyou saw the @if statementin the lastslide, well, there is
more for you.
//Createaquickgrid
/*Numbe...
Control Directives
Now, the same grid butusingafunction
@functionget-col-width($width,$columns,$number){
@return($width/$c...
Wait! It gets even better!
Reinventingthe wheelis notnice...
You can reuse Compass mixins, functions and more.
Compass
Abrief example with Compass
Gisthttp://sassmeister.com/gist/9773018
And let's proceed with some questions.
Questions?
Thank you!
Introduction to CSS Preprocessors
Upcoming SlideShare
Loading in …5
×

Introduction to CSS Preprocessors

1,347 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,347
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to CSS Preprocessors

  1. 1. 0
  2. 2. Introduction to CSS Preprocessors Honestly... JustSaSS by Lucas Torres
  3. 3. Our staff
  4. 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. 5. About me Lucas Torres Web Developer at inQbation
  6. 6. About me Python, PHP HTML, CSS, JavaScript Drupal CrazyaboutUX and User Centered Design Playingwith Node.js and MongoDB
  7. 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. 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. 9. Which one should I choose? There are manyCSS Preprocessors
  10. 10. Which one should I choose? I can'tcompete with more than 1 million results from Google ;)
  11. 11. Which one should I choose? So, as with beer: Choose the one thattastes better for you
  12. 12. My personal taste is SaSS AndinbeerisModeloEspecial;)
  13. 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. 14. SaSS superpowers Variables Nesting Partials &Import Mixings Extend/Inheritance Operators And yes, functions!
  15. 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. 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. 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. 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. 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. 20. Wantso see some realaction?Ok, let's check the Mixins
  21. 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. 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. 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. 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. 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. 26. Wait! It gets even better! Reinventingthe wheelis notnice... You can reuse Compass mixins, functions and more.
  27. 27. Compass Abrief example with Compass Gisthttp://sassmeister.com/gist/9773018 And let's proceed with some questions.
  28. 28. Questions?
  29. 29. Thank you!

×