Embed Size (px)
Citation preview
Save time by using SASS to develop
CSS
@Barcamp 2012 Save time by using SASS 2
About me
EAT DIMANCHE
➢ Web Project Coordinator
at Web Essentials
➢ Graduated from Puthisastra University
➢ http://fb.com/dimanche.eat
@Barcamp 2012 Save time by using SASS 3
Agenda
➢ Introduction➢ Boring parts➢ CSS Enhancements➢ Installation➢ Demo➢ Questions
@Barcamp 2012 Save time by using SASS 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 5
Boring parts➢ Mixed up formating
@Barcamp 2012 Save time by using SASS 6
Boring parts➢ Mixed up color
@Barcamp 2012 Save time by using SASS 7
Boring parts➢ Duplication
@Barcamp 2012 Save time by using SASS 8
Boring parts➢ Long selectors
@Barcamp 2012 Save time by using SASS 9
Boring parts➢ @import
@Barcamp 2012 Save time by using SASS 10
CSS Enhancements➢ SCSS will be compiled to CSS
@Barcamp 2012 Save time by using SASS 11
CSS Enhancements➢ Nesting
@Barcamp 2012 Save time by using SASS 12
CSS Enhancements➢ Parent reference
@Barcamp 2012 Save time by using SASS 13
CSS Enhancements➢ Variables
@Barcamp 2012 Save time by using SASS 14
CSS Enhancements➢ Operators and functions
@Barcamp 2012 Save time by using SASS 15
CSS Enhancements➢ Functions : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
adjust_hue(color, degrees)complement(color)darken(color, amount)desaturate(color, amount)grayscale(color)lighten(color, amount)mix(color1, color2, weight)opacify(color, amount)saturate(color, amount)transparentize(color, amount)hsl(hue, saturation, lightness)hsla(hue, saturation, lightness,alpha)rgb(red, green, blue)rgba(red, green, blue, alpha)rgba(color, alpha)
alpha(color)blue(color)green(color)hue(color)red(color)opacity(color)lightness(color)saturation(color)abs(value)ceil(value)floor(value)round(value)comparable(number1, number2)type_of(obj)
percentage(value)unit(number)unitless(number)quote(str)unquote(str)
@Barcamp 2012 Save time by using SASS 16
CSS Enhancements➢ Interpolation
@Barcamp 2012 Save time by using SASS 17
CSS Enhancements➢ Mixins
@Barcamp 2012 Save time by using SASS 18
CSS Enhancements➢ Arguments
@Barcamp 2012 Save time by using SASS 19
CSS Enhancements➢ Import
@Barcamp 2012 Save time by using SASS 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 21
Demo
@Barcamp 2012 Save time by using SASS 22
Questions
Thank you!
