SlideShare une entreprise Scribd logo

Front End Badassery with Sass

•
•
jessabean
jessabean

An intro to the features of Sass/SCSS

TechnologieFormation
1  sur  24
Télécharger pour lire hors ligne
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

Recommandé

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
 

Recommandé

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
 

Contenu connexe

En vedette

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
 

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Dernier

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...
Miguel Araújo
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
 
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
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

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...
 
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
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
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...
 
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...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
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
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
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...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
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)
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 

Front End Badassery with Sass