Download - Save time by using sass to develop css
![Page 1: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/1.jpg)
Save time by using SASS to develop
CSS
![Page 2: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/2.jpg)
@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
![Page 3: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/3.jpg)
@Barcamp 2012 Save time by using SASS 3
Agenda
➢ Introduction➢ Boring parts➢ CSS Enhancements➢ Installation➢ Demo➢ Questions
![Page 4: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/4.jpg)
@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.
![Page 5: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/5.jpg)
@Barcamp 2012 Save time by using SASS 5
Boring parts➢ Mixed up formating
![Page 6: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/6.jpg)
@Barcamp 2012 Save time by using SASS 6
Boring parts➢ Mixed up color
![Page 7: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/7.jpg)
@Barcamp 2012 Save time by using SASS 7
Boring parts➢ Duplication
![Page 8: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/8.jpg)
@Barcamp 2012 Save time by using SASS 8
Boring parts➢ Long selectors
![Page 9: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/9.jpg)
@Barcamp 2012 Save time by using SASS 9
Boring parts➢ @import
![Page 10: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/10.jpg)
@Barcamp 2012 Save time by using SASS 10
CSS Enhancements➢ SCSS will be compiled to CSS
![Page 11: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/11.jpg)
@Barcamp 2012 Save time by using SASS 11
CSS Enhancements➢ Nesting
![Page 12: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/12.jpg)
@Barcamp 2012 Save time by using SASS 12
CSS Enhancements➢ Parent reference
![Page 13: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/13.jpg)
@Barcamp 2012 Save time by using SASS 13
CSS Enhancements➢ Variables
![Page 14: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/14.jpg)
@Barcamp 2012 Save time by using SASS 14
CSS Enhancements➢ Operators and functions
![Page 15: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/15.jpg)
@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)
![Page 16: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/16.jpg)
@Barcamp 2012 Save time by using SASS 16
CSS Enhancements➢ Interpolation
![Page 17: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/17.jpg)
@Barcamp 2012 Save time by using SASS 17
CSS Enhancements➢ Mixins
![Page 18: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/18.jpg)
@Barcamp 2012 Save time by using SASS 18
CSS Enhancements➢ Arguments
![Page 19: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/19.jpg)
@Barcamp 2012 Save time by using SASS 19
CSS Enhancements➢ Import
![Page 20: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/20.jpg)
@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
![Page 21: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/21.jpg)
@Barcamp 2012 Save time by using SASS 21
Demo
![Page 22: Save time by using sass to develop css](https://reader033.vdocuments.us/reader033/viewer/2022060110/555a4092d8b42ae1398b4e99/html5/thumbnails/22.jpg)
@Barcamp 2012 Save time by using SASS 22
Questions
Thank you!