SlideShare a Scribd company logo
1 of 18
Download to read offline
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

More Related Content

What's hot (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
 

Viewers also liked

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
 

Viewers also liked (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
 

Similar to Sass in 5

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

Similar to 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!
 

More from Mario Peshev

More from 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)
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
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...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
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
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
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...
 
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
 
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
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
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, ...
 

Sass in 5