SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
How I learned to stop
writing CSS and start
     writing SASS
CSS   SASS
SASS
So.. what is SASS?
SASS
           =
Syntactically Awesome
     StyleSheets
What can SASS do?
•   Nesting
•   Variables
•   Mixins
•   Selector Inheritance
•   Errors!
COMPASS
What is Compass?
What can Compass do?
•   Clean your markup
•   Create reusable CSS3 patterns
•   Add extensions
•   Spriting!
•   Selector Inheritance
•   And.. more
SASS + COMPASS
 Pros and Cons
Pros
•   Easy learning curve
•   (Pretty) easy installation
•   Saves (a lot of) time
•   Easy to maintain
Cons
•   Documentation isn’t always clear
•   Configuration can be a bit tricky
•   Doesn’t work recursively
•   Isn't updated regularly
A Word About LESS
Where can I find the magic?
•   Sass - http://sass-lang.com/
•   Compass - http://compass-style.org/
•   Rubi for windows - http://rubyinstaller.org/
•   Less - http://lesscss.org/
Have fun SASSing!

Mais conteúdo relacionado

Mais procurados

[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
kubw3rt34
 

Mais procurados (8)

Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof HoubenPre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
 
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
[Audiobook] HTML, CSS and JavaScript All in One, Sams Teach Yourself: Coverin...
 
Taming The Beast
Taming The BeastTaming The Beast
Taming The Beast
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
CSS Best Practices
CSS Best PracticesCSS Best Practices
CSS Best Practices
 
Photoshop Best Practices for Web Design
Photoshop Best Practices for Web DesignPhotoshop Best Practices for Web Design
Photoshop Best Practices for Web Design
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
 
More native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvasMore native look and feel of mobile JS applications with HTML5 canvas
More native look and feel of mobile JS applications with HTML5 canvas
 

Destaque (6)

3 scrabble spelling short shadows long shadows
3 scrabble spelling short shadows long shadows3 scrabble spelling short shadows long shadows
3 scrabble spelling short shadows long shadows
 
Global Share Of Writers Workshop
Global Share Of Writers WorkshopGlobal Share Of Writers Workshop
Global Share Of Writers Workshop
 
Logic guide 2
Logic guide 2Logic guide 2
Logic guide 2
 
3rd. spelling list 1
3rd. spelling list 13rd. spelling list 1
3rd. spelling list 1
 
1st. period spelling list # 2
1st. period spelling list # 21st. period spelling list # 2
1st. period spelling list # 2
 
My Writing Experience - Kinder
My Writing Experience - KinderMy Writing Experience - Kinder
My Writing Experience - Kinder
 

Semelhante a How I learned to stop writing CSS and start writing SASS

The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
canarymason
 

Semelhante a How I learned to stop writing CSS and start writing SASS (20)

Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassTurbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
SASS & CSS Arquitecture
SASS & CSS ArquitectureSASS & CSS Arquitecture
SASS & CSS Arquitecture
 
Arunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style GuideArunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style Guide
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
 
LESS is More
LESS is MoreLESS is More
LESS is More
 
ADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using SassADUG - May 2014 - Theming in Drupal using Sass
ADUG - May 2014 - Theming in Drupal using Sass
 
Sass - basic to advance
Sass  - basic to advanceSass  - basic to advance
Sass - basic to advance
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Front-end Tools: Sifting Through the Madness
Front-end Tools: Sifting Through the MadnessFront-end Tools: Sifting Through the Madness
Front-end Tools: Sifting Through the Madness
 

Mais de Israeli Internet Association technology committee

Mais de Israeli Internet Association technology committee (20)

נגישות באינטרנט לאנשים עם מוגבלות, הלכה למעשה
נגישות באינטרנט לאנשים עם מוגבלות, הלכה למעשהנגישות באינטרנט לאנשים עם מוגבלות, הלכה למעשה
נגישות באינטרנט לאנשים עם מוגבלות, הלכה למעשה
 
ליאור שיאון - מפת מקלטים
ליאור שיאון - מפת מקלטיםליאור שיאון - מפת מקלטים
ליאור שיאון - מפת מקלטים
 
טל גלילי - אושאידי
טל גלילי - אושאידיטל גלילי - אושאידי
טל גלילי - אושאידי
 
אמרי באומר - האקתון חוסן לאומי
אמרי באומר - האקתון חוסן לאומיאמרי באומר - האקתון חוסן לאומי
אמרי באומר - האקתון חוסן לאומי
 
אורי סגל - מרחב מוגן
אורי סגל - מרחב מוגןאורי סגל - מרחב מוגן
אורי סגל - מרחב מוגן
 
אופיר בן אבי - ממשל זמין
אופיר בן אבי - ממשל זמיןאופיר בן אבי - ממשל זמין
אופיר בן אבי - ממשל זמין
 
יובל טיסונה - המלחמה הבאה
יובל טיסונה - המלחמה הבאהיובל טיסונה - המלחמה הבאה
יובל טיסונה - המלחמה הבאה
 
עמוס גבע - StandWithUs
עמוס גבע - StandWithUsעמוס גבע - StandWithUs
עמוס גבע - StandWithUs
 
בן לנג - Iron Dome Count
בן לנג - Iron Dome Countבן לנג - Iron Dome Count
בן לנג - Iron Dome Count
 
יחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידים
יחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידיםיחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידים
יחידת לימוד – תכנון ופיתוח אפליקציות ווב למכשירים ניידים
 
האם ויקיפדיה מונגשת לאנשים עם מוגבלויות?
האם ויקיפדיה מונגשת לאנשים עם מוגבלויות? האם ויקיפדיה מונגשת לאנשים עם מוגבלויות?
האם ויקיפדיה מונגשת לאנשים עם מוגבלויות?
 
IPv6 - Global Adoption - Ran Liberman
IPv6 - Global Adoption - Ran LibermanIPv6 - Global Adoption - Ran Liberman
IPv6 - Global Adoption - Ran Liberman
 
implementing IPv6 in an ISP network, case study and lessons learned - Amos Ro...
implementing IPv6 in an ISP network, case study and lessons learned - Amos Ro...implementing IPv6 in an ISP network, case study and lessons learned - Amos Ro...
implementing IPv6 in an ISP network, case study and lessons learned - Amos Ro...
 
IPv6 training guide - Yuval Shaul
IPv6 training guide - Yuval ShaulIPv6 training guide - Yuval Shaul
IPv6 training guide - Yuval Shaul
 
פתיחה - יום השקת IPv6 בישראל
פתיחה - יום השקת IPv6 בישראלפתיחה - יום השקת IPv6 בישראל
פתיחה - יום השקת IPv6 בישראל
 
אבטחת מידע לעובדים בארגון
אבטחת מידע לעובדים בארגוןאבטחת מידע לעובדים בארגון
אבטחת מידע לעובדים בארגון
 
מכללת ספיר - W3C - תהליכים וטכנולוגיות
מכללת ספיר - W3C - תהליכים וטכנולוגיותמכללת ספיר - W3C - תהליכים וטכנולוגיות
מכללת ספיר - W3C - תהליכים וטכנולוגיות
 
Mobile web design Eyal Sela
Mobile web design   Eyal SelaMobile web design   Eyal Sela
Mobile web design Eyal Sela
 
HTML5, ווב נייד ותקנים פתוחים ברשת
HTML5, ווב נייד ותקנים פתוחים ברשת HTML5, ווב נייד ותקנים פתוחים ברשת
HTML5, ווב נייד ותקנים פתוחים ברשת
 
סקירת טכנולוגיות W3C חדשות שלא תראו אפילו בגירסאות ליליות - 12.2011
סקירת טכנולוגיות W3C חדשות שלא תראו אפילו בגירסאות ליליות - 12.2011סקירת טכנולוגיות W3C חדשות שלא תראו אפילו בגירסאות ליליות - 12.2011
סקירת טכנולוגיות W3C חדשות שלא תראו אפילו בגירסאות ליליות - 12.2011
 

Último

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Último (20)

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

How I learned to stop writing CSS and start writing SASS

  • 1. How I learned to stop writing CSS and start writing SASS
  • 2. CSS SASS
  • 4. So.. what is SASS?
  • 5. SASS = Syntactically Awesome StyleSheets
  • 6. What can SASS do? • Nesting • Variables • Mixins • Selector Inheritance • Errors!
  • 9. What can Compass do? • Clean your markup • Create reusable CSS3 patterns • Add extensions • Spriting! • Selector Inheritance • And.. more
  • 10. SASS + COMPASS Pros and Cons
  • 11. Pros • Easy learning curve • (Pretty) easy installation • Saves (a lot of) time • Easy to maintain
  • 12. Cons • Documentation isn’t always clear • Configuration can be a bit tricky • Doesn’t work recursively • Isn't updated regularly
  • 13. A Word About LESS
  • 14. Where can I find the magic? • Sass - http://sass-lang.com/ • Compass - http://compass-style.org/ • Rubi for windows - http://rubyinstaller.org/ • Less - http://lesscss.org/