Successfully reported this slideshow.

Agile css development with Compass/SASS

2,612 views

Published on

A

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

Agile css development with Compass/SASS

  1. 1. JS DAY -VERONA - May 14th 2014 AndreaVerlicchi @verlok www.andreaverlicchi.eu Agile CSS Development with / SASS
  2. 2. About me • AndreaVerlicchi! • Front-end architect
 (also PHP developer)! • www.andreaverlicchi.eu
 twitter: @verlok
  3. 3. Let's talk about CSS
  4. 4. CSS can become messy • Many site sections
 home, landings, products, etc.! • Many page sections
 header, footer, main, etc.! • Many devices
 desktop, tablet, smartphone, etc.! • Many screen resolutions! • Many colors, fonts, helpers, etc.
  5. 5. CSS can become messy • Not a unique author! • Not a unique coding style
  6. 6. CSS can become looong • long CSS file vs split CSS file
 we could split the code into more CSS files,
 but it would result in less performing websites
 (more HTTP requests)! • long CSS file vs code readability
 code is less readable if files are very long, especially when you first look to someone else's code
  7. 7. CSS can be repetitive • Sandboxed rules! article header {...}
 article h1 {...}
 article p {...}
 article footer {...}
 article .author {...}! • Rules that share styles! button { background-color: #BADA55 }
 a { color: #BADA55 }
 body { border-bottom: 5px solid #BADA55 }
  8. 8. CSS is not a complete language • No variables (yet)! • No extensibility! • No math (yet)! • Just a few functions (rgb, rgba, ...)
  9. 9. What if all this could CHANGE?
  10. 10. What if we could use...
  11. 11. What if we could use... Variables?Nesting? Functions? Math?
  12. 12. Partials? Variables?Nesting? Functions? Math?
  13. 13. SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.! http://sass-lang.com
  14. 14. HOW IT WORKS - DEV YOU WRITE SASS / SCSS IT CREATES CSS IT WATCHES! FOR CHANGES
  15. 15. HOW IT WORKS - PROD YOU WRITE SASS / SCSS COMPILE IT CREATES CSS
  16. 16. NESTING ! ! article li { margin-right: 1em; } ! article a { color: white; background: red; display: block; } ! article a:hover { color: red; background: white; } article { ! li { margin-right: 1em; } ! a { color: white; background: red; display: block; ! &:hover { color: red; background: white; } } }
  17. 17. ! ! button { background: #CE4DD6; } ! a { color: #CE4DD6; } ! header { border-bottom: 3px; border-color: #CE4DD6; } $mainColor: #CE4DD6; ! button { background: $mainColor; } ! a { color: $mainColor; } ! header { border-bottom: 3px; border-color: $mainColor; } VARIABLES
  18. 18. FUNCTIONS button { color: #CE4DD6; } ! button:hover { color: #D76DDE; } button { color: $mainColor; } ! button:hover { color: saturate($mainColor, 10%); }
  19. 19. MATH ! ! #side { width: 23.95833%; margin: 2.08333%; } ! #main { width: 47.91667%; margin: 2.08333%; } ! #more { width: 23.95833%; } $width: 960px; ! #side { width: percentage(230px / $width); margin: percentage(10px / $width); } ! #main { width: percentage(460px / $width); margin: percentage(10px / $width); } ! #more { width: percentage(230px / $width); }
  20. 20. PARTIALS // === site.scss === ! @import "normalize"; @import "fonts"; @import "mixins"; @import "headerFooter"; @import "helpers"; @import "forms"; … … … @import "whatever"; (very long CSS file)
 !html { line-height:1; } !ol,ul { list-style:none; } !table { border-collapse:collapse; border-spacing:0; } !caption,th,td { text-align:left; font-weight:400; vertical-align:middle; } !q,blockquote { quotes:none; } !q:before,q:after,blockquote:before,blockquote:after { content:none; } !a img { border:none; } !body { font-family:Tahoma, sans-serif; font-size:87.5%; -webkit-text-size-adjust:none; } !h1,h2,h3,h4,h5,h6,#payoff { line-height:1.5em; } !p { margin-bottom:6px; line-height:1.5em; } !abbr,acronym { border-bottom:1px dotted #690; cursor:help; } !#language,#loginMessage { position:absolute; } !#content { position:relative; } !#accountZone { display:none; float:right; border-radius:10px; } !#accountZone li { display:block; float:left; } !#accountZone a { display:block; padding:8px 10px; } !#accountZone form,#accountZone #regeneratePwd { float:left; } !#loginForm form { padding:6px 10px 5px; } !#loginForm button { font-size:91.66667%; border:0; background:#eee; height:18px; text-align:center; width:auto; box-shadow:inset 0 -2px 5px rgba(0,0,0,0.3); margin:0; } !#loginForm input { width:76px; height:18px; border:none; font-size:100%; outline:none; box-shadow:inset 0 2px 5px rgba(0,0,0,0.3); padding:0 2px; } !… … … … …
  21. 21. SASS 3 does all this (and lots more)
  22. 22. It allows you to do powerful operations! using Mixins
  23. 23. It allows to choose the output CSS style, including Compressed
  24. 24. It can remove comments you don't want to publish // this is a shameful hack
  25. 25. However, some developers still don't like it...
  26. 26. ...hard to debug?
  27. 27. COMPASS Compass is an open-source CSS Authoring Framework. Compass uses SASS.! http://compass-style.org
  28. 28. COMPASS extends SASS + it gives you some interesting features
  29. 29. Click on the file name:line to view the CSS file inspector
 to get the original SASS/SCSS file name and line 1. IT'S EASY TO DEBUG! Inspect the element you want to debug 
 to get the CSS rules in the inspector
  30. 30. 2. IT'S LOADED WITH LOTS OF HELPERS & PATTERNS CSS3,Typography, Utilities (Reset, Clearfix), Sticky Footer, and more
  31. 31. You just add the images, it generates the sprite + gives you a helper to use your images 3. IT MAKES CSS SPRITES
  32. 32. 3. IT MAKES CSS SPRITES @import "compass/utilities/sprites"; ! @import “sponsors/*.png”; // windowsAzure.png, appDynamics.png … ! #sponsor_section { .sponsor1 { @include sponsors-sprite(windowsAzure, true); } ! .sponsor2 { @include sponsors-sprite(appDynamics, true); } }
  33. 33. #sponsor_section .sponsor1, #sponsor_section .sponsor2, #sponsor_section .sponsor3 { background: url('../img/sponsors-s69e070e3f8.png') no-repeat; } ! #sponsor_section .sponsor1 { background-position: 0 0; height: 171px; width: 457px; } ! #sponsor_section .sponsor2 { background-position: 0 -356px; height: 95px; width: 373px; } 3. IT MAKES CSS SPRITES
  34. 34. Resume
  35. 35. SASS • Nesting! • Variables! • Functions! • Math! • Partials
  36. 36. • Easy debugging! • Easy spriting! • Lots of helpers COMPASS
  37. 37. ORGANIZATION • Better code organization! • No code repetition (DRY)! • Shorter files to manage! • Much speeder coding
  38. 38. HOW TO INSTALL • Download Ruby
 rubyinstaller.org! • Command prompt:
 gem install compass • Download Ruby
 ruby-lang.com! • Terminal:
 sudo gem install compass
  39. 39. HOW TO SETUP • in terminal / command prompt
 go to your project folder
 cd {your/project/path}! • create the scaffolding 
 compass install compass! • start watching changes / creating CSS
 compass watch
  40. 40. HOW TO START • SCSS format is CSS compliant! • You can start writing SCSS as if you were writing CSS / Rename your CSS files in SCSS! • Start using variables and nesting! • Organize your CSS code in partials! • Do more complex things using mixins, etc.
  41. 41. SOME ADVICE • Keep in mind that you’re still writing CSS, always figure how your CSS will become! • Avoid unnecessary nesting 
 (a maximum of 3 levels is often enough)! • In continuous integration environments, always run compass clean before compass compile (especially if you use branches)
  42. 42. GIVE IT A TRY ! • It takes no more than 30 minutes to be installed and learned! • It's used by more and more front-end developers and companies! • It would improve your technical skills
  43. 43. twitter: verlok! www.andreaverlicchi.eu
  44. 44. Q&A @verlok #jsday

×