SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
Sass in 5


Mario Peshev
                  me.peshev.net
@no_fear_inc
Sass für alles

●   CSS3 meta lang written in Ruby, circa 2007
●   Completely CSS3 compatible
●   Data types and arithmetic 
●   Hampton Catlin, Nathan Weizenbaum, Chris 
    Eppstein
●   SassScript – functions, console, extensions
●   Sass and Scss
Nested Syntax
Variables
Interactive Shell
Inheritance (@extend)
Reusability (@mixin) 
Params @ mixin
Conditionals
.scss N:1 .css
Sass vs Scss

●   Old Sass ­>




●   Scss is the new one – 
    Sassy CSS (3.0+)
Handy Functions

●   rgb/rgba
●   mix
●   hsl/hsla
●   lighten/darken
●   saturate/desaturate
●   opacify/transparentize
Handy Functions 2

●   quote/unquote
●   percentage
●   round/ceil/floor
●   min/max
●   length/nth
●   join/append
●   Custom functions written in Ruby
Run the Sass
Compile options

scss ­­watch style.scss:style.css
compass watch [path/to/project]


Options available for compiled code formatting
GUI friends:
Thank you


Mario Peshev
                me.peshev.net
@no_fear_inc

Contenu connexe

Tendances (9)

LESS CSS
LESS CSSLESS CSS
LESS CSS
 
WebRender (MadRust)
WebRender (MadRust)WebRender (MadRust)
WebRender (MadRust)
 
Start using less css
Start using less cssStart using less css
Start using less css
 
Clojure Lightning Talk
Clojure Lightning TalkClojure Lightning Talk
Clojure Lightning Talk
 
kranonit S05E01 Sergey Burma: Welcome to cloud!
kranonit S05E01 Sergey Burma: Welcome to cloud!kranonit S05E01 Sergey Burma: Welcome to cloud!
kranonit S05E01 Sergey Burma: Welcome to cloud!
 
Vlad zelinschi optimizing the critical rendering path
Vlad zelinschi   optimizing the critical rendering pathVlad zelinschi   optimizing the critical rendering path
Vlad zelinschi optimizing the critical rendering path
 
.Less - CSS done right
.Less - CSS done right.Less - CSS done right
.Less - CSS done right
 
Hacking with YUI 3 - Open Hack Day 2011
Hacking with YUI 3 - Open Hack Day 2011Hacking with YUI 3 - Open Hack Day 2011
Hacking with YUI 3 - Open Hack Day 2011
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 

En vedette

Running with Plugins
Running with PluginsRunning with Plugins
Running with Plugins
Chris Lema
 
How to Give an Awesome WordCamp Talk
How to Give an Awesome WordCamp TalkHow to Give an Awesome WordCamp Talk
How to Give an Awesome WordCamp Talk
Cory Miller
 
Infographics Made Easy
Infographics Made EasyInfographics Made Easy
Infographics Made Easy
Chris Lema
 

En vedette (16)

Running with Plugins
Running with PluginsRunning with Plugins
Running with Plugins
 
Building Something Bigger & Better Than Yourself
Building Something Bigger & Better Than YourselfBuilding Something Bigger & Better Than Yourself
Building Something Bigger & Better Than Yourself
 
How to Give an Awesome WordCamp Talk
How to Give an Awesome WordCamp TalkHow to Give an Awesome WordCamp Talk
How to Give an Awesome WordCamp Talk
 
Road to the right Membership Plugin
Road to the right Membership PluginRoad to the right Membership Plugin
Road to the right Membership Plugin
 
Sticky Presentations
Sticky PresentationsSticky Presentations
Sticky Presentations
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 
Comparing WordPress Membership Plugins
Comparing WordPress Membership PluginsComparing WordPress Membership Plugins
Comparing WordPress Membership Plugins
 
Product Pricing
Product PricingProduct Pricing
Product Pricing
 
WordPress for StartUps
WordPress for StartUpsWordPress for StartUps
WordPress for StartUps
 
7 Keys to Bootstrapping Your Business
7 Keys to Bootstrapping Your Business7 Keys to Bootstrapping Your Business
7 Keys to Bootstrapping Your Business
 
Pricing Webinar (iThemes)
Pricing Webinar (iThemes)Pricing Webinar (iThemes)
Pricing Webinar (iThemes)
 
Building a Brand w/ Blogging
Building a Brand w/ BloggingBuilding a Brand w/ Blogging
Building a Brand w/ Blogging
 
Infographics Made Easy
Infographics Made EasyInfographics Made Easy
Infographics Made Easy
 
Impact Analysis - LoopConf
Impact Analysis - LoopConfImpact Analysis - LoopConf
Impact Analysis - LoopConf
 
Sticky Teaching
Sticky TeachingSticky Teaching
Sticky Teaching
 
20 Designs for Title Slides In PowerPoint
20 Designs for Title Slides In PowerPoint20 Designs for Title Slides In PowerPoint
20 Designs for Title Slides In PowerPoint
 

Similaire à Sass in 5

The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
Yatendra Bhardwaj
 

Similaire à Sass in 5 (20)

A journey from sass to css in-js
A journey from sass to css in-jsA journey from sass to css in-js
A journey from sass to css in-js
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Universal CSS - Betsy Granger - ebookcraft 2018
Universal CSS - Betsy Granger - ebookcraft 2018Universal CSS - Betsy Granger - ebookcraft 2018
Universal CSS - Betsy Granger - ebookcraft 2018
 
OpenCms Days 2014 - Enhancing OpenCms front end development with Sass and Grunt
OpenCms Days 2014 - Enhancing OpenCms front end development with Sass and GruntOpenCms Days 2014 - Enhancing OpenCms front end development with Sass and Grunt
OpenCms Days 2014 - Enhancing OpenCms front end development with Sass and Grunt
 
Sass that CSS
Sass that CSSSass that CSS
Sass that CSS
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Compass n Sass
Compass n SassCompass n Sass
Compass n Sass
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introduction
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
Sass_Cubet seminar
Sass_Cubet seminarSass_Cubet seminar
Sass_Cubet seminar
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sass
 
European SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint SassyEuropean SharePoint Webinar - Make SharePoint Sassy
European SharePoint Webinar - Make SharePoint Sassy
 
Sass
SassSass
Sass
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!
SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!
SPS Belgium - Stop your SharePoint CSS becoming a di-SASS-ter today!
 

Plus de Mario Peshev

Plus de Mario Peshev (20)

Why Does an eCommerce Store Cost 200 to 100K And More?
Why Does an eCommerce Store Cost 200 to 100K And More?Why Does an eCommerce Store Cost 200 to 100K And More?
Why Does an eCommerce Store Cost 200 to 100K And More?
 
Management Decision Making Process
Management Decision Making ProcessManagement Decision Making Process
Management Decision Making Process
 
The Future Of WordPress In 2020
The Future Of WordPress In 2020The Future Of WordPress In 2020
The Future Of WordPress In 2020
 
What Makes PHP An Awesome Language
What Makes PHP An Awesome LanguageWhat Makes PHP An Awesome Language
What Makes PHP An Awesome Language
 
Top 6 Business Tips for October 2019
Top 6 Business Tips for October 2019Top 6 Business Tips for October 2019
Top 6 Business Tips for October 2019
 
The Future of WordPress And WooCommerce
The Future of WordPress And WooCommerceThe Future of WordPress And WooCommerce
The Future of WordPress And WooCommerce
 
Tips for Successful WordPress Enterprise Projects
Tips for Successful WordPress Enterprise ProjectsTips for Successful WordPress Enterprise Projects
Tips for Successful WordPress Enterprise Projects
 
WordPress Architecture for Tech-Savvy Managers
WordPress Architecture for Tech-Savvy ManagersWordPress Architecture for Tech-Savvy Managers
WordPress Architecture for Tech-Savvy Managers
 
Business and Monetization Opportunities for Developers
Business and Monetization Opportunities for DevelopersBusiness and Monetization Opportunities for Developers
Business and Monetization Opportunities for Developers
 
Building SaaS with WordPress - WordCamp Netherlands 2016
Building SaaS with WordPress - WordCamp Netherlands 2016Building SaaS with WordPress - WordCamp Netherlands 2016
Building SaaS with WordPress - WordCamp Netherlands 2016
 
WordPress Code Architecture
WordPress Code ArchitectureWordPress Code Architecture
WordPress Code Architecture
 
Virtual Company - Go Limitless
Virtual Company - Go LimitlessVirtual Company - Go Limitless
Virtual Company - Go Limitless
 
Debugging WordPress
Debugging WordPressDebugging WordPress
Debugging WordPress
 
Platforms based on WordPress
Platforms based on WordPressPlatforms based on WordPress
Platforms based on WordPress
 
WordPress Theme Reviewers Team
WordPress Theme Reviewers TeamWordPress Theme Reviewers Team
WordPress Theme Reviewers Team
 
Get Involved with WordPress
Get Involved with WordPressGet Involved with WordPress
Get Involved with WordPress
 
Contributing to WordPress
Contributing to WordPressContributing to WordPress
Contributing to WordPress
 
Start Your Website for Free!
Start Your Website for Free!Start Your Website for Free!
Start Your Website for Free!
 
Choosing a WordPress Theme
Choosing a WordPress ThemeChoosing a WordPress Theme
Choosing a WordPress Theme
 
Custom Post Types in the wild (WordCamp Sofia 2012)
Custom Post Types in the wild (WordCamp Sofia 2012)Custom Post Types in the wild (WordCamp Sofia 2012)
Custom Post Types in the wild (WordCamp Sofia 2012)
 

Dernier

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Dernier (20)

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...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
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?
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
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?
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
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
 
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
 
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
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
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
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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...
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

Sass in 5