Save time by using sass to develop css

408 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
408
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Save time by using sass to develop css

  1. 1. Save time by using SASS to develop CSS
  2. 2. About me EAT DIMANCHE ➢ Web Project Coordinator at Web Essentials ➢ Graduated from Puthisastra University ➢ dimanche@web-essentials.asia ➢ http://fb.com/dimanche.eat@Barcamp 2012 Save time by using SASS 2
  3. 3. Agenda ➢ Introduction ➢ Boring parts ➢ CSS Enhancements ➢ Installation ➢ Demo ➢ Questions@Barcamp 2012 Save time by using SASS 3
  4. 4. Introduction ➢ Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. ➢ Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.@Barcamp 2012 Save time by using SASS 4
  5. 5. Boring parts ➢ Mixed up formating@Barcamp 2012 Save time by using SASS 5
  6. 6. Boring parts ➢ Mixed up color@Barcamp 2012 Save time by using SASS 6
  7. 7. Boring parts ➢ Duplication@Barcamp 2012 Save time by using SASS 7
  8. 8. Boring parts ➢ Long selectors@Barcamp 2012 Save time by using SASS 8
  9. 9. Boring parts ➢ @import@Barcamp 2012 Save time by using SASS 9
  10. 10. CSS Enhancements ➢ SCSS will be compiled to CSS@Barcamp 2012 Save time by using SASS 10
  11. 11. CSS Enhancements ➢ Nesting@Barcamp 2012 Save time by using SASS 11
  12. 12. CSS Enhancements ➢ Parent reference@Barcamp 2012 Save time by using SASS 12
  13. 13. CSS Enhancements ➢ Variables@Barcamp 2012 Save time by using SASS 13
  14. 14. CSS Enhancements ➢ Operators and functions@Barcamp 2012 Save time by using SASS 14
  15. 15. CSS Enhancements ➢ Functions : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html adjust_hue(color, degrees) alpha(color) percentage(value) complement(color) blue(color) unit(number) darken(color, amount) green(color) unitless(number) desaturate(color, amount) hue(color) quote(str) grayscale(color) red(color) unquote(str) lighten(color, amount) opacity(color) mix(color1, color2, weight) lightness(color) opacify(color, amount) saturation(color) saturate(color, amount) abs(value) transparentize(color, ceil(value) amount) floor(value) hsl(hue, saturation, round(value) lightness) comparable(number1, hsla(hue, saturation, number2) lightness, type_of(obj) alpha) rgb(red, green, blue) rgba(red, green, blue, alpha) rgba(color, alpha)@Barcamp 2012 Save time by using SASS 15
  16. 16. CSS Enhancements ➢ Interpolation@Barcamp 2012 Save time by using SASS 16
  17. 17. CSS Enhancements ➢ Mixins@Barcamp 2012 Save time by using SASS 17
  18. 18. CSS Enhancements ➢ Arguments@Barcamp 2012 Save time by using SASS 18
  19. 19. CSS Enhancements ➢ Import@Barcamp 2012 Save time by using SASS 19
  20. 20. Installation ➢ Rubyinstaller : http://rubyinstaller.org/downloads/ ➢ Install the SASS Gem:  sudo gem install sass ➢ Reference: http://sass-lang.com/ sass –watch style.scss@Barcamp 2012 Save time by using SASS 20
  21. 21. Demo@Barcamp 2012 Save time by using SASS 21
  22. 22. Questions Thank you!@Barcamp 2012 Save time by using SASS 22

×