SlideShare una empresa de Scribd logo

Front End Badassery with Sass

•
•
jessabean
jessabean

An intro to the features of Sass/SCSS

TecnologíaEducación
1 de 24
Descargar para leer sin conexión
FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012
“I don’t like the green. Can we change it?”
CSS IS A PAIN
it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE
ENTER SASS a front end developer’s dream
VARIABLES
NESTING
MIXINS
EXTEND
COLOR FUNCTIONS
MATH
SASS OR SCSS?
TWO DIFFERENT SYNTAXES
HELPFUL TIPS
LIMIT YOUR NESTING no more than 2 levels
USE @IMPORT no extra HTTP requests!
SEPARATE MIXINS keep a mixin library
USE PARTIALS think in terms of MODULES build up your LIBRARY
NEXT STEPS
FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon
LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein
OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus
GO FORTH, BADASS
KEEP IN TOUCH! jessica.avison@gmail.com @jessabean github.com/jessabean

Recomendados

Presentation1question6
Presentation1question6Presentation1question6
Presentation1question6
Aaron Powell
 
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassTurbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Almog Baku
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
James Pearce
 
Stylesheet Wrangling with SCSS
Stylesheet Wrangling with SCSSStylesheet Wrangling with SCSS
Stylesheet Wrangling with SCSS
sforst
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Frontend-Entwicklung mit SASS & Compass
Frontend-Entwicklung mit SASS & CompassFrontend-Entwicklung mit SASS & Compass
Frontend-Entwicklung mit SASS & Compass
Andreas Dantz
 
Performance front end language
Performance front end languagePerformance front end language
Performance front end language
Wei-Yi Chiu
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 

Recomendados

Presentation1question6
Presentation1question6Presentation1question6
Presentation1question6
Aaron Powell
 
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassTurbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Almog Baku
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
James Pearce
 
Stylesheet Wrangling with SCSS
Stylesheet Wrangling with SCSSStylesheet Wrangling with SCSS
Stylesheet Wrangling with SCSS
sforst
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Frontend-Entwicklung mit SASS & Compass
Frontend-Entwicklung mit SASS & CompassFrontend-Entwicklung mit SASS & Compass
Frontend-Entwicklung mit SASS & Compass
Andreas Dantz
 
Performance front end language
Performance front end languagePerformance front end language
Performance front end language
Wei-Yi Chiu
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
 
老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass
智遠 成
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSS
Berit Hlubek
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
Jon Dean
 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
Billy Shih
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
Shaho Toofani
 
Horario de clases segundo grado
Horario de clases segundo gradoHorario de clases segundo grado
Horario de clases segundo grado
Everardo Diaz Diaz
 
Sass
SassSass
Sass
Tayseer_Emam
 
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
Mobile Vikings
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
 
Using Sass in Your WordPress Projects
Using Sass in Your WordPress ProjectsUsing Sass in Your WordPress Projects
Using Sass in Your WordPress Projects
Jeremy Green
 
Sass that CSS
Sass that CSSSass that CSS
Sass that CSS
Trish Ang
 
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
Austin Pickett
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
Andrea Tino
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
Julie Cameron
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
Yatendra Bhardwaj
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
 
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Michelle Barker
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
Amey Parab
 
Crazy sassy
Crazy sassyCrazy sassy
Crazy sassy
Michael Arestad
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
 
ParisJS #11 : Sass & Compass
ParisJS #11 : Sass & CompassParisJS #11 : Sass & Compass
ParisJS #11 : Sass & Compass
Julien Cabanès
 

Más contenido relacionado

Destacado

Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSS
Berit Hlubek
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
Jon Dean
 

Destacado (8)

老成的Sass&Compass
老成的Sass&Compass老成的Sass&Compass
老成的Sass&Compass
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSS
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
 
Sass and compass workshop
Sass and compass workshopSass and compass workshop
Sass and compass workshop
 
Horario de clases segundo grado
Horario de clases segundo gradoHorario de clases segundo grado
Horario de clases segundo grado
 
Sass
SassSass
Sass
 

Similar a Front End Badassery with Sass

Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
Julie Cameron
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
Yatendra Bhardwaj
 
ParisJS #11 : Sass & Compass
ParisJS #11 : Sass & CompassParisJS #11 : Sass & Compass
ParisJS #11 : Sass & Compass
Julien Cabanès
 
Save time by using sass to develop css
Save time by using sass to develop cssSave time by using sass to develop css
Save time by using sass to develop css
Bill Chea
 
Using scss-at-noisestreet
Using scss-at-noisestreetUsing scss-at-noisestreet
Using scss-at-noisestreet
Wei Pin Teo
 

Similar a Front End Badassery with Sass (20)

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
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Using Sass in Your WordPress Projects
Using Sass in Your WordPress ProjectsUsing Sass in Your WordPress Projects
Using Sass in Your WordPress Projects
 
Sass that CSS
Sass that CSSSass that CSS
Sass that CSS
 
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
 
The World of Stylesheet Languages
The World of Stylesheet LanguagesThe World of Stylesheet Languages
The World of Stylesheet Languages
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Crazy sassy
Crazy sassyCrazy sassy
Crazy sassy
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
ParisJS #11 : Sass & Compass
ParisJS #11 : Sass & CompassParisJS #11 : Sass & Compass
ParisJS #11 : Sass & Compass
 
An Introduction to Sassy CSS
An Introduction to Sassy CSSAn Introduction to Sassy CSS
An Introduction to Sassy CSS
 
Save time by using sass to develop css
Save time by using sass to develop cssSave time by using sass to develop css
Save time by using sass to develop css
 
CSS-in-JS in React: Why, current state, and bright future.
CSS-in-JS in React: Why, current state, and bright future.CSS-in-JS in React: Why, current state, and bright future.
CSS-in-JS in React: Why, current state, and bright future.
 
Using scss-at-noisestreet
Using scss-at-noisestreetUsing scss-at-noisestreet
Using scss-at-noisestreet
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint Sassy
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
 

Último (20)

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 

Front End Badassery with Sass