Agile css development with Compass/SASS

  • 1,461 views
Uploaded on

A

A

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,461
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
20
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • for Cavalli, D&G, Armani, StellaMC\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WITH SASS, WE CAN\n
  • WITH SASS, WE CAN\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. JS DAY -VERONA - May 14th 2014 AndreaVerlicchi @verlok www.andreaverlicchi.eu Agile CSS Development with / SASS
  • 2. About me • AndreaVerlicchi! • Front-end architect
 (also PHP developer)! • www.andreaverlicchi.eu
 twitter: @verlok
  • 3. Let's talk about CSS
  • 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. CSS can become messy • Not a unique author! • Not a unique coding style
  • 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. 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. CSS is not a complete language • No variables (yet)! • No extensibility! • No math (yet)! • Just a few functions (rgb, rgba, ...)
  • 9. What if all this could CHANGE?
  • 10. What if we could use...
  • 11. What if we could use... Variables?Nesting? Functions? Math?
  • 12. Partials? Variables?Nesting? Functions? Math?
  • 13. SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.! http://sass-lang.com
  • 14. HOW IT WORKS - DEV YOU WRITE SASS / SCSS IT CREATES CSS IT WATCHES! FOR CHANGES
  • 15. HOW IT WORKS - PROD YOU WRITE SASS / SCSS COMPILE IT CREATES CSS
  • 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. ! ! 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. FUNCTIONS button { color: #CE4DD6; } ! button:hover { color: #D76DDE; } button { color: $mainColor; } ! button:hover { color: saturate($mainColor, 10%); }
  • 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. 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. SASS 3 does all this (and lots more)
  • 22. It allows you to do powerful operations! using Mixins
  • 23. It allows to choose the output CSS style, including Compressed
  • 24. It can remove comments you don't want to publish // this is a shameful hack
  • 25. However, some developers still don't like it...
  • 26. ...hard to debug?
  • 27. COMPASS Compass is an open-source CSS Authoring Framework. Compass uses SASS.! http://compass-style.org
  • 28. COMPASS extends SASS + it gives you some interesting features
  • 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. 2. IT'S LOADED WITH LOTS OF HELPERS & PATTERNS CSS3,Typography, Utilities (Reset, Clearfix), Sticky Footer, and more
  • 31. You just add the images, it generates the sprite + gives you a helper to use your images 3. IT MAKES CSS SPRITES
  • 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. #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. Resume
  • 35. SASS • Nesting! • Variables! • Functions! • Math! • Partials
  • 36. • Easy debugging! • Easy spriting! • Lots of helpers COMPASS
  • 37. ORGANIZATION • Better code organization! • No code repetition (DRY)! • Shorter files to manage! • Much speeder coding
  • 38. HOW TO INSTALL • Download Ruby
 rubyinstaller.org! • Command prompt:
 gem install compass • Download Ruby
 ruby-lang.com! • Terminal:
 sudo gem install compass
  • 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. 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. 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. 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. twitter: verlok! www.andreaverlicchi.eu
  • 44. Q&A @verlok #jsday