Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Preprocessor presentation


Published on

Presentation on CSS Preprocessors focusing on SASS/SCSS and LESS.

From Preprocesser Madness event at:

Published in: Technology, Design
  • Be the first to comment

Preprocessor presentation

  1. 1. CSS Preprocesser MadnessLESS/SCSS/Compass/Bootstrap
  2. 2. About UsMario NobleCharles Mata
  3. 3. Why Madness? Because you may become crazy for it. Or over it.Or maybe just watching this "Powerpoint" will drive you insane.
  4. 4. PreprocessorsAKA - The "Peoples Patch"Our alternative to the cross browser wars.At least for the time being...
  5. 5. Learn CSS and good practices firstPreprocessors are not a replacement for goodcoding, planning and design.
  6. 6. What is preprocessing?Preprocessing is essentially creating theequivalent of a Photoshop file or a suped upmailing template for your css.It gives you added umph to your work.Sometimes making it easier.Occasionally it might be overkill.
  7. 7. Why do it?Do you like to type the same thing over and over?Do you enjoy trying to hunt down a tiny bit of codesomewhere in thousands of lines of code and then usingfind and replace hoping itll work?No?Use preprocessing.
  8. 8. Most of all - DRY practices Dont Repeat Yourself
  9. 9. Other reasons● CSS 3 browser prefixes● Responsive design● Other people are using it, so you want to have a clue.● Efficiency● Better organization● Faster sites and better SEO
  10. 10. Disadvantages● Learning curve● Team Maintenance● Yet another layer● Code bloat● Selectoritis
  11. 11. Methods and Approaches● SASS/SCSS● LESS● Stylus● cleverCSS● cssCrush● prefixer (● force browser to interpret PHP as CSS
  12. 12. Were going over the two mostpopular preprocessors tonight LESS and SASS/SCSS Well be glossing over some stuff in the interest of time and clarity
  13. 13. Which is best?
  14. 14. Lets go over what they shareEach of them now share most of each otherscapabilities with some minor differences insyntax.The following examples are from ChrisEppsteins gits on: Chris!
  15. 15. Variables (placeholders)Sass | Less-----------------+-----------------$color: red; | @color: red;div { | div { color: $color; | color: @color;} | } Becomes div { color: #ff0000; }
  16. 16. Nesting (outlining)Sass | Less-------------------+-----------------p { | p { a { | a { color: red; | color: red; &:hover { | &:hover { color: blue; | color: blue; } } }} } Becomes p a {color: red;} p a:hover {color: blue;}
  17. 17. Mixins (mini-templates)Sass | Less----------------------------------+----------------------------------@mixin bordered { | .bordered { border-top: dotted 1px black; | border-top: dotted 1px black; border-bottom: solid 2px black; | border-bottom: solid 2px black;} | } |#menu a { | #menu a { @include bordered; | .bordered;} | } Becomes .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { border-top: dotted 1px black; border-bottom: solid 2px black; }
  18. 18. Mixins with arguments (adverbs/adjectives)Sass | Less----------------------------------+----------------------------------@mixin bordered($width: 2px) { | .bordered(@width: 2px) { border: $width solid black; | border: @width solid black;} | } |#menu a { | #menu a { @include bordered(4px); | .bordered(4px);} | }Becomes#menu a { border: 4px solid #000000;}
  19. 19. NumbersSass: Less:1cm * 1em => 1 cm * em 1cm * 1em => Error2in * 3in => 6 in * in 2in * 3in => 6in(1cm / 1em) * 4em => 4cm (1cm / 1em) * 4em2in + 3cm + 2pc => 3.514in => Error3in / 2in => 1.5 2in + 3cm + 2pc => Error 3in / 2in => 1.5in
  20. 20. Imports (Get that there file!)@import "somefile.less";@import "somefile";@import "somefile.scss";@import "somefile";@import "somedirectory/somefile.scss";
  21. 21. Interpolation (stick it in there)SCSS style LESS style/* style.scss */ @base-url: "";$side: top; background-image: url("@{base-url} /images/bg.png");$radius: 10px; Becomes:.rounded- { border-#{$side}-radius: $radius; background-image: url("http://assets.fnord. com/images/bg.png");.someclass { -moz-border-radius-#{$side}: $radius; color: #333; -webkit-border-#{$side}-radius: $radius; }}
  22. 22. Escaping (take it literally)LESS.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}SASS.class { filter: #{"ms:alwaysHasItsOwnSyntax.For.Stuff()"};}Becomes:.class {filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}
  23. 23. CommentsBoth LESS and SCSS use the same commentstructure.// is a note in the authoring file/* some note */ is published to the compiled file.
  24. 24. @media query tweakingLESS (for SASS/SCSS replace @ with $ for Becomes:variables) .profile-pic {@break-small: 320px; float: left;@break-large: 1200px; width: 250px; } @media screen and (max-width:.profile-pic { 320px) { float: left; .profile-pic { width: 250px; width: 100px; float: none; @media screen and (max-width: @break-small) { } width: 100px; } float: none; @media screen and (min-width: 1200px) { } .profile-pic { @media screen and (min-width: @break-large) { float: right; float: right; } } }}
  25. 25. DifferencesAs with anything, there are advantages anddisadvantages of going with various options.LESS and SASS are no different.Or rather they are in some ways...
  26. 26. Extra features of SASS/SCSS● Can properly "extend" other classes.● True if, for, while and each control directives (Logic)● Global scoping of variables● Compass (sprites)● Origin line reporting● Good Rails integration● Various output styles● Real functions that return values
  27. 27. Extra features of LESS● Namespacing● Guards and Pattern Matching● Easy compile "on the fly" with a single JavaScript file.● Variables as constants● Twitter Bootstrap● Usual scope practices● JavaScript evaluation
  28. 28. To compile locally or on the server?Considerations:PerformanceCoordinationCachingServer install
  29. 29. Lets demo some Bootstrap n Stuff! Go Charles go!
  30. 30. Hands on part!Lets do LESS firstGet the example material or use your own the basic js - bonus points - download twitter bootstrapGet a complierMac OSX an editor or download the code hinters
  31. 31. Already have the LESS stuff?To install SASS/SCSSGo here: the Windows Installer if youre on Windows. that, go to instructions to install both SASS and CompassDownload either Scout app is good too. Just paid.Configure your editorI recommend SublimeText along with the Package Installer to installSCSS/LESS code hinting.
  32. 32. "Converting" your existing CSSReally just nests it.LEAST Convert Sass to SCSS$ sass-convert style.css style.scss
  33. 33. LESS useful tools if using the js tocompile.After you put this into your files:<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>Put this after your file name in the url:#!watchChrome users: --allow-file-access-from-files inshortcut or use a local servermac : terminal ; open /Applications/ --args --allow-file-access-from-files
  34. 34. CompilingYou can use tools or the command line.SCSS users may need to delve into theirconfig.rb file or just use the tools.LESS users might just want to use the tools tosetup publish paths.
  35. 35. Lets have fun with variables @myvariable or $myvariable
  36. 36. Comments // and /* */
  37. 37. Mixins @mixin mymixin { } @include mymixin { } .somemixin { }.anotherclass { .somemixin }
  38. 38. Mixins with parameters @mixin mymixin($hello); @include mymixin(10px); .somemixin(@hello) .somemixin (10px);
  39. 39. Numberswidth: $navbar-width/$items - 10px; color: @base-color * 3;
  40. 40. Interpolationborder-#{$side}-radius: $radius;border-@{side}-radius: $radius;
  41. 41. GotchasLESSKeep your import structure flat.SCSSWatch out for imports with .less or not.
  42. 42. Congratz!!!!You has mad skillz nowz!
  43. 43. Q&A