SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Save time by using SASS to develop

              CSS
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
Agenda

  ➢   Introduction
  ➢   Boring parts
  ➢   CSS Enhancements
  ➢   Installation
  ➢
      Demo
  ➢   Questions




@Barcamp 2012    Save time by using SASS   3
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
Boring parts
  ➢
      Mixed up formating




@Barcamp 2012       Save time by using SASS   5
Boring parts
  ➢
      Mixed up color




@Barcamp 2012          Save time by using SASS   6
Boring parts
  ➢
      Duplication




@Barcamp 2012       Save time by using SASS   7
Boring parts
  ➢
      Long selectors




@Barcamp 2012          Save time by using SASS   8
Boring parts
  ➢
      @import




@Barcamp 2012   Save time by using SASS   9
CSS Enhancements
  ➢
      SCSS will be compiled to CSS




@Barcamp 2012      Save time by using SASS   10
CSS Enhancements
  ➢
      Nesting




@Barcamp 2012   Save time by using SASS   11
CSS Enhancements
  ➢
      Parent reference




@Barcamp 2012      Save time by using SASS   12
CSS Enhancements
  ➢
      Variables




@Barcamp 2012     Save time by using SASS   13
CSS Enhancements
  ➢
      Operators and functions




@Barcamp 2012       Save time by using SASS   14
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
CSS Enhancements
  ➢
      Interpolation




@Barcamp 2012         Save time by using SASS   16
CSS Enhancements
  ➢
      Mixins




@Barcamp 2012   Save time by using SASS   17
CSS Enhancements
  ➢
      Arguments




@Barcamp 2012     Save time by using SASS   18
CSS Enhancements
  ➢
      Import




@Barcamp 2012   Save time by using SASS   19
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
Demo




@Barcamp 2012   Save time by using SASS   21
Questions

                         Thank you!




@Barcamp 2012   Save time by using SASS   22

Contenu connexe

Similaire à Save time by using sass to develop css

Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshopShaho Toofani
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareRitwik Das
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Tahmina Khatoon
 
Sass - basic to advance
Sass  - basic to advanceSass  - basic to advance
Sass - basic to advanceVinita Swamy
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet LanguagesAndrea Tino
 
Sass that CSS
Sass that CSSSass that CSS
Sass that CSSTrish Ang
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101Eric Sembrat
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesDevConFu
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 

Similaire à Save time by using sass to develop css (20)

UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
 
Syntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech SoftwareSyntactically Awesome Stylesheet - A workshop by Citytech Software
Syntactically Awesome Stylesheet - A workshop by Citytech Software
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
 
Sass - basic to advance
Sass  - basic to advanceSass  - basic to advance
Sass - basic to advance
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
Sass that CSS
Sass that CSSSass that CSS
Sass that CSS
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web Interfaces
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 

Plus de Bill Chea

Xen cloud platform
Xen cloud platformXen cloud platform
Xen cloud platformBill Chea
 
Safety social media for positive social change
Safety social media for positive social changeSafety social media for positive social change
Safety social media for positive social changeBill Chea
 
Open street map
Open street mapOpen street map
Open street mapBill Chea
 
Open development cambodia
Open development cambodiaOpen development cambodia
Open development cambodiaBill Chea
 
Job hunting & career development
Job hunting & career developmentJob hunting & career development
Job hunting & career developmentBill Chea
 
Internet security
Internet securityInternet security
Internet securityBill Chea
 
How to build up communication skill
How to build up communication skillHow to build up communication skill
How to build up communication skillBill Chea
 
Google mapmaker
Google mapmakerGoogle mapmaker
Google mapmakerBill Chea
 
Financial job study travel planning
Financial job study travel planningFinancial job study travel planning
Financial job study travel planningBill Chea
 
ERP web based system
ERP web based systemERP web based system
ERP web based systemBill Chea
 
10 golden features of business website
10 golden features of business website10 golden features of business website
10 golden features of business websiteBill Chea
 
UrbanVoicePDF
UrbanVoicePDFUrbanVoicePDF
UrbanVoicePDFBill Chea
 
4 hour-workweek-blogger
4 hour-workweek-blogger4 hour-workweek-blogger
4 hour-workweek-bloggerBill Chea
 

Plus de Bill Chea (20)

Xen cloud platform
Xen cloud platformXen cloud platform
Xen cloud platform
 
Why ruby
Why rubyWhy ruby
Why ruby
 
Unix tc
Unix tcUnix tc
Unix tc
 
Sithi hub
Sithi hubSithi hub
Sithi hub
 
Safety social media for positive social change
Safety social media for positive social changeSafety social media for positive social change
Safety social media for positive social change
 
Open street map
Open street mapOpen street map
Open street map
 
Open development cambodia
Open development cambodiaOpen development cambodia
Open development cambodia
 
Job hunting & career development
Job hunting & career developmentJob hunting & career development
Job hunting & career development
 
Internet security
Internet securityInternet security
Internet security
 
How to build up communication skill
How to build up communication skillHow to build up communication skill
How to build up communication skill
 
Google mapmaker
Google mapmakerGoogle mapmaker
Google mapmaker
 
Financial job study travel planning
Financial job study travel planningFinancial job study travel planning
Financial job study travel planning
 
Khmer TTS
Khmer TTSKhmer TTS
Khmer TTS
 
Khmer OCR
Khmer OCRKhmer OCR
Khmer OCR
 
Khmer ASR
Khmer ASRKhmer ASR
Khmer ASR
 
ERP web based system
ERP web based systemERP web based system
ERP web based system
 
10 golden features of business website
10 golden features of business website10 golden features of business website
10 golden features of business website
 
UrbanVoicePDF
UrbanVoicePDFUrbanVoicePDF
UrbanVoicePDF
 
4 hour-workweek-blogger
4 hour-workweek-blogger4 hour-workweek-blogger
4 hour-workweek-blogger
 
UrbanVoice
UrbanVoiceUrbanVoice
UrbanVoice
 

Save time by using sass to develop css

  • 1. Save time by using SASS to develop CSS
  • 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. Agenda ➢ Introduction ➢ Boring parts ➢ CSS Enhancements ➢ Installation ➢ Demo ➢ Questions @Barcamp 2012 Save time by using SASS 3
  • 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. Boring parts ➢ Mixed up formating @Barcamp 2012 Save time by using SASS 5
  • 6. Boring parts ➢ Mixed up color @Barcamp 2012 Save time by using SASS 6
  • 7. Boring parts ➢ Duplication @Barcamp 2012 Save time by using SASS 7
  • 8. Boring parts ➢ Long selectors @Barcamp 2012 Save time by using SASS 8
  • 9. Boring parts ➢ @import @Barcamp 2012 Save time by using SASS 9
  • 10. CSS Enhancements ➢ SCSS will be compiled to CSS @Barcamp 2012 Save time by using SASS 10
  • 11. CSS Enhancements ➢ Nesting @Barcamp 2012 Save time by using SASS 11
  • 12. CSS Enhancements ➢ Parent reference @Barcamp 2012 Save time by using SASS 12
  • 13. CSS Enhancements ➢ Variables @Barcamp 2012 Save time by using SASS 13
  • 14. CSS Enhancements ➢ Operators and functions @Barcamp 2012 Save time by using SASS 14
  • 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. CSS Enhancements ➢ Interpolation @Barcamp 2012 Save time by using SASS 16
  • 17. CSS Enhancements ➢ Mixins @Barcamp 2012 Save time by using SASS 17
  • 18. CSS Enhancements ➢ Arguments @Barcamp 2012 Save time by using SASS 18
  • 19. CSS Enhancements ➢ Import @Barcamp 2012 Save time by using SASS 19
  • 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. Demo @Barcamp 2012 Save time by using SASS 21
  • 22. Questions Thank you! @Barcamp 2012 Save time by using SASS 22