Download to read offline
Uploaded byBlake Newman
Introduction to CSS Preprocessors
This document provides an introduction and overview of CSS preprocessors like Sass. It discusses what CSS preprocessors are, some of their main features and advantages over regular CSS like variables, nesting, mixins, functions and more. It then demonstrates examples of how to write and use some of these features in Sass, including variables, nesting, partials and imports, mixins with and without arguments, functions, control directives and using the Compass library. The document aims to convince readers of the benefits of using a CSS preprocessor like Sass by showing working code examples.
Introduction to CSS Preprocessors
- 1.
- 2. Introduction to CSS Preprocessors Honestly...JustSaSS by Lucas Torres
- 3.
- 4. You can bepart 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 WebDeveloper at inQbation
- 6. About me Python, PHP HTML,CSS, JavaScript Drupal CrazyaboutUX and User Centered Design Playingwith Node.js and MongoDB
- 7. So, aCSS preprocessorreceive 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 canI 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 shouldI choose? There are manyCSS Preprocessors
- 10. Which one shouldI choose? I can'tcompete with more than 1 million results from Google ;)
- 11. Which one shouldI choose? So, as with beer: Choose the one thattastes better for you
- 12. My personal tasteis SaSS AndinbeerisModeloEspecial;)
- 13. Main differences: SaSSVs. 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.
- 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 asimplecss 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 samecode, 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 nestselectors, justas in HTML. Make sense, right? Gisthttp://sassmeister.com/gist/9771826
- 19. Talkingabouteasyto maintain, letmeintroduce 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 somerealaction?Ok, let's check the Mixins
- 21. Mixins Reuse instead ofrewrite, 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 Theylooklike 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 childgames!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 betyousaw 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, thesame 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 getseven better! Reinventingthe wheelis notnice... You can reuse Compass mixins, functions and more.
- 27. Compass Abrief example withCompass Gisthttp://sassmeister.com/gist/9773018 And let's proceed with some questions.
- 28.
- 29.