SlideShare ist ein Scribd-Unternehmen logo

Sass and compass workshop

Sass and compass workshop

1 von 171
Downloaden Sie, um offline zu lesen
SASS & COMPASS WORKSHOP
Feb. 21, 2014 | Ver. 8
Shaho Toofani
Sass and Compass Workshop - ©2014 Shaho Toofani
Tools
codepen.io
SassMeister
Grunt/LiveReload
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass
— CSS is crafted to be simple, but scaling simplicity is difficult.
At Scale
Slight variations of colors, fonts, numbers& other properties arise
Stylesheet size may become unmanageable
— With power of Sass (Sass NOT SASS)
Keepyour stylesheet DRY
Revision are waaaay easier (no more find& replace all)
Fancy new CSS3 propertiesbecaome production-ready
Build reusable mixinsandfunctions
Create your own stylesheet framework
Sass and Compass Workshop - ©2014 Shaho Toofani
Why do we need CSS preprocessors?
CSSis a declarative, not a programminglanguage.
variables — placeholders for something reusable.
functions — manipulate valueswith operations (for example, make this color 20 percent lighter).
it’sfaster towrite — for example nesting
it’smore manageable — for example partials
Sass and Compass Workshop - ©2014 Shaho Toofani
The DRY principle
— Use variables (only define a value once)
CSS
a {
color: blue;
}
nav{
background-color: blue;
}
— DRY: don’t repeat yourself
SCSS
$brand-color: blue;
a {
color: $brand-color;
}
nav{
background-color: $brand-color;
}
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass
— Automatic RGBA color values and conversions
CSS
.color-traditional {
color: #11c909;
color: rgba(17, 201, 9, 0.9);
}
SCSS
.color-modern {
color: $green;
color: rgba($green, 0.9);
}
Sass and Compass Workshop - ©2014 Shaho Toofani

Recomendados

Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)Tahmina Khatoon
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetNeha Sharma
 

Más contenido relacionado

Was ist angesagt?

An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingJames Cryer
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSSJulie Cameron
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sassSean Wolfe
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to cssNeil Perlin
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101Eric Sembrat
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 MinutesPatrick Crowley
 

Was ist angesagt? (20)

An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Less vs sass
Less vs sassLess vs sass
Less vs sass
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
CSS3
CSS3CSS3
CSS3
 
Css to-scss
Css to-scssCss to-scss
Css to-scss
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Sass
SassSass
Sass
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
 
DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101DrupalCamp Chattanooga - September 2014 - Sass 101
DrupalCamp Chattanooga - September 2014 - Sass 101
 
Sass compass
Sass compassSass compass
Sass compass
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
 
Haml And Sass In 15 Minutes
Haml And Sass In 15 MinutesHaml And Sass In 15 Minutes
Haml And Sass In 15 Minutes
 
Less css
Less cssLess css
Less css
 

Destacado

Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Eric Sembrat
 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quickBilly Shih
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsCSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsJatin_23
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
Bootstrap tutorial
Bootstrap tutorialBootstrap tutorial
Bootstrap tutorialvijaypatel_b
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachJulie Kuehl
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayChamnap Chhorn
 
Css3 animation
Css3 animationCss3 animation
Css3 animationTed Hsu
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentKonstantin Kudryashov
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized军 沈
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptForziatech
 
Smart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassSmart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassMihaela
 
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassTurbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassAlmog Baku
 

Destacado (20)

Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, GradientsCSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, Gradients
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
Workshop Advance CSS3 animation
Workshop Advance CSS3 animationWorkshop Advance CSS3 animation
Workshop Advance CSS3 animation
 
Bootstrap tutorial
Bootstrap tutorialBootstrap tutorial
Bootstrap tutorial
 
Sass: Introduction
Sass: IntroductionSass: Introduction
Sass: Introduction
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Prototype
PrototypePrototype
Prototype
 
Css3 animation
Css3 animationCss3 animation
Css3 animation
 
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend developmentLESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Smart CSS theming with Sass and Compass
Smart CSS theming with Sass and CompassSmart CSS theming with Sass and Compass
Smart CSS theming with Sass and Compass
 
JavaScript OOPs
JavaScript OOPsJavaScript OOPs
JavaScript OOPs
 
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & CompassTurbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
 

Ähnlich wie Sass and compass workshop

Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajYatendra Bhardwaj
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with SassSven Wolfermann
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)emrox
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqDignitasDigital1
 
Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction SassZeeshan Ahmed
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve Krueger
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
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 SassEric Sembrat
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassMediacurrent
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesDevConFu
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compassChris Lee
 
Sakai Meet MORPHEUS: Slides
Sakai Meet MORPHEUS: SlidesSakai Meet MORPHEUS: Slides
Sakai Meet MORPHEUS: Slidesalienresident
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
 

Ähnlich wie Sass and compass workshop (20)

Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
SASS Preprocessor
SASS PreprocessorSASS Preprocessor
SASS Preprocessor
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Sass_Cubet seminar
Sass_Cubet seminarSass_Cubet seminar
Sass_Cubet seminar
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction Sass
 
Understanding sass
Understanding sassUnderstanding sass
Understanding sass
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
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
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Jina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web InterfacesJina bolton - Refactoring Web Interfaces
Jina bolton - Refactoring Web Interfaces
 
Dallas Drupal Days 2012 - Introduction to less sass-compass
Dallas Drupal Days 2012  - Introduction to less sass-compassDallas Drupal Days 2012  - Introduction to less sass-compass
Dallas Drupal Days 2012 - Introduction to less sass-compass
 
Sakai Meet MORPHEUS: Slides
Sakai Meet MORPHEUS: SlidesSakai Meet MORPHEUS: Slides
Sakai Meet MORPHEUS: Slides
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
 

Último

Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptDrZeeshanBhatti
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkTimothy Spann
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...ISPMAIndia
 
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTSi-engage
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfssuser82c38d
 
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementEmbracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementOnePlan Solutions
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)GDSCNiT
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...ISPMAIndia
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Asher Sterkin
 
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...confluent
 
App Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxApp Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxPoojitha B
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxmavinoikein
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetMatthewTHawley
 
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...emili denli
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
SPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementSPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementISPMAIndia
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sqlbharatjanadharwarud
 
Manual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12FxManual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12Fxjavierdavidvelasco17
 

Último (20)

Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.ppt
 
Features of IETM Software -Code and Pixels
Features of IETM Software -Code and PixelsFeatures of IETM Software -Code and Pixels
Features of IETM Software -Code and Pixels
 
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and FlinkDBA Fundamentals Group: Continuous SQL with Kafka and Flink
DBA Fundamentals Group: Continuous SQL with Kafka and Flink
 
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
Product Manager vs Product Owner – Why Do Companies Still Struggle 23 Years A...
 
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
100 TOOLS TO MEASURE AND ANALYSE YOUR DIGITAL MARKETING EFFORTS
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdf
 
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio ManagementEmbracing Change - The Impact of Generative AI on Strategic Portfolio Management
Embracing Change - The Impact of Generative AI on Strategic Portfolio Management
 
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
Open Sprintera (Where Open Source Sparks a Sprint of Possibilities)
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024
 
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
Industry 4.0: Building the Unified Namespace with Confluent, HiveMQ and Spark...
 
App Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptxApp Builder - Hierarchical Data Apps.pptx
App Builder - Hierarchical Data Apps.pptx
 
Getting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptxGetting Started with Trello for Beginners.pptx
Getting Started with Trello for Beginners.pptx
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 Smartsheet
 
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
The Game-Changer_ How Software Development Outsource Can Catapult Your Growth...
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
SPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product ManagementSPM 2024 – Overview of and benefits of AI in Product Management
SPM 2024 – Overview of and benefits of AI in Product Management
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 
sql ppt for students who preparing for sql
sql ppt for students who preparing for sqlsql ppt for students who preparing for sql
sql ppt for students who preparing for sql
 
Manual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12FxManual de la Mezcladora SoundCraft Notepad -12Fx
Manual de la Mezcladora SoundCraft Notepad -12Fx
 

Sass and compass workshop

  • 1. SASS & COMPASS WORKSHOP Feb. 21, 2014 | Ver. 8 Shaho Toofani Sass and Compass Workshop - ©2014 Shaho Toofani
  • 3. Why you should use Sass and Compass — CSS is crafted to be simple, but scaling simplicity is difficult. At Scale Slight variations of colors, fonts, numbers& other properties arise Stylesheet size may become unmanageable — With power of Sass (Sass NOT SASS) Keepyour stylesheet DRY Revision are waaaay easier (no more find& replace all) Fancy new CSS3 propertiesbecaome production-ready Build reusable mixinsandfunctions Create your own stylesheet framework Sass and Compass Workshop - ©2014 Shaho Toofani
  • 4. Why do we need CSS preprocessors? CSSis a declarative, not a programminglanguage. variables — placeholders for something reusable. functions — manipulate valueswith operations (for example, make this color 20 percent lighter). it’sfaster towrite — for example nesting it’smore manageable — for example partials Sass and Compass Workshop - ©2014 Shaho Toofani
  • 5. The DRY principle — Use variables (only define a value once) CSS a { color: blue; } nav{ background-color: blue; } — DRY: don’t repeat yourself SCSS $brand-color: blue; a { color: $brand-color; } nav{ background-color: $brand-color; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 6. Why you should use Sass and Compass — Automatic RGBA color values and conversions CSS .color-traditional { color: #11c909; color: rgba(17, 201, 9, 0.9); } SCSS .color-modern { color: $green; color: rgba($green, 0.9); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 7. Why you should use Sass and Compass — Forget about vendor prefixes CSS .rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } SCSS .rounded { @includeborder-radius(4px); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 8. Why you should use Sass and Compass — Nesting rules CSS nava { color: #ff0b13; } nava:hover{ color: #11c909; } nava:visited { color: #091fff; } SCSS nav{ a { color:$red; &:hover{ color: $green; } &:visited { color: $blue; } } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 9. Why you should use Sass and Compass — Media queries the simple way CSS @media onlyscreen and(min-width: 280px) and (max-width: 479px){ .h1 { font-size: 1.1em; } } @media onlyscreen and(min-width: 480px) and (max-width: 599px){ .h1 { font-size: 0.9em; } } SCSS h1 { @includeMQ(XS) { font-size: 1.1em; } @includeMQ(S) { font-size: 0.9em; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 10. WHAT IS SASS? Style with attitude Sass and Compass Workshop - ©2014 Shaho Toofani
  • 11. WHAT IS SASS? — CSS with superpowers - (it looks like CSS!) SCSS $blue: #3bbfce; $margin: 16px; .content-navigation { border-color:$blue; color: darken($blue, 9%); } .border{ padding:$margin/ 2; margin: $margin / 2; border-color:$blue; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 12. WHAT IS SASS? — Sass is a CSS preprocessor A layer between the stylesheets youauthor andthe .css filesyouserve to the browser. Sassisshort for Syntactically Awesome Stylesheets. Createdby , Primary developers are and .Hampton Catlin Nathan Weizenbaum Chris Eppstein Sass and Compass Workshop - ©2014 Shaho Toofani
  • 13. WHAT IS SASS? — Official Website: http://sass-lang.com — The project's GitHub development homepage: https://github.com/nex3/sass Sass and Compass Workshop - ©2014 Shaho Toofani
  • 14. INSTALLATION Don't panic! Sass and Compass Workshop - ©2014 Shaho Toofani
  • 15. Installing Ruby Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have it. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 16. INSTALLING SASS — Command prompt (line) install Install Sass ruby geminstallsass ruby Fetching: sass-3.2.12.gem(100%) Successfully installedsass-3.2.12 1 gem installed Installingri documentation for sass-3.2.12... InstallingRDocdocumentation for sass-3.2.12... You’ve just installedSass. Double-check: ruby sass-v Sass and Compass Workshop - ©2014 Shaho Toofani
  • 17. Monitor & convert the Sass files to CSS — To run Sass from the command line ruby sassinput.scssoutput.css — Telling Sass which files to WATCH ruby sass--watch screen.scss:screen.css — You can also tell Sass to watch an entire directory ruby sass--watch sass:css Sass and Compass Workshop - ©2014 Shaho Toofani
  • 18. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass Scout app - http://mhs.github.com/scout-app Scout isa free Adobe Air-based application. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 19. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass CodeKit - http://incident57.com/codekit Sass and Compass Workshop - ©2014 Shaho Toofani
  • 20. USING APPS INSTEAD OF THE COMMAND LINE — Graphical tools for working with Sass and Compass LiveReload - http://livereload.com Sass and Compass Workshop - ©2014 Shaho Toofani
  • 21. Useful Commands — Check which versions of Sass are available ruby gemlist sass –a –r — Installing the latest pre-release version ruby geminstallsass --pre — Uninstall a specific version of Sass versionnumber is the release youwant toremove (for example, 3.2.0.alpha.103). ruby gemuninstall sass--versionversionnumber Sass and Compass Workshop - ©2014 Shaho Toofani
  • 22. Choosing an output style — Nested (the default) CSS ol { margin: 10px0; padding: 10px 0; } ol li{ font-size: 2em; line-height: 1.4; } ol li p { color: #333; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 23. CHOOSING AN OUTPUT STYLE — Expanded CSS ol { margin: 10px0; padding: 10px 0; } ol li { font-size: 2em; line-height: 1.4; } ol li p { color: #333; } — Add a flag to the Watch command ruby sass--watch --style expandedscreen.scss:screen.css Sass and Compass Workshop - ©2014 Shaho Toofani
  • 24. CHOOSING AN OUTPUT STYLE — Compact CSS ol { margin: 10px 0; padding: 10px 0; } ol li { font-size: 2em; line-height: 1.4; } ol li p { color: #333; } — Add a flag to the Watch command ruby sass--watch --style compactscreen.scss:screen.css Sass and Compass Workshop - ©2014 Shaho Toofani
  • 25. CHOOSING AN OUTPUT STYLE — Compressed CSS ol{margin:10px0;padding:10px 0;}olli{font-size:2em;line-height:1.4;}ol lip{color:# — Add a flag to the Watch command ruby sass--watch --style compressed screen.scss:screen.css Sass and Compass Workshop - ©2014 Shaho Toofani
  • 26. DON’T EDIT YOUR OUTPUT! N O T E ! it’simportant to note that when you’re using Sass, you’ll nolonger be editingany .css files. The .scss filesare where you’ll live and breathe. The reason being, any changesyou make to the .cssfile will eventually get overridden as soon asyouupdate the .scssandSass compilesthe output. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 27. VARIABLES allow you to use the same value in multiple places, aswell as perform basic mathsandfunctions. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 28. Variables — Using variables: Colors - for example shades of aparticular color Font Stacks Margin & Padding - consistency in design Border Widths Border Radius Sass and Compass Workshop - ©2014 Shaho Toofani
  • 29. Variable Declaration — Numbers - can be set with or without units: SCSS $rounded: 4px; $line-height: 1.5; $font-size: 3rem; — Colors SCSS $base: purple; $border: rgba(0, 255, 0, 0.5); $shadow: #333; — Booleans SCSS $rounded: false; $shadow: true; Sass and Compass Workshop - ©2014 Shaho Toofani
  • 30. Variable Declaration — Strings - can be set with or without quotes: SCSS $header: 'Helvetica Neue'; $callout: Arial; $message: "Loading..."; — Lists SCSS $colors: red, green, blue, yellow; $margin: 40px 0 20px 100px; — Null SCSS $shadow: null; Sass and Compass Workshop - ©2014 Shaho Toofani
  • 31. Declaring and Referencing variables — Declaring a Sass variable: SCSS $highlight-color: #abcdef; $highlight-border: 1px$highlight-colorsolid; — Referencing: SCSS .selected { border: $highlight-border; } CSS .selected { border: 1px #abcdefsolid; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 32. Variable names: dashes or underscores? N O T E ! Different people prefer different styles; some use dashestoseparate wordswithin variables ($highlight- color), andsome use underscores ($highlight_color). SCSS $link-color: blue; a { color: $link_color; } In thisexample, $link-color and $link_color both refer to the same variable. In fact, dashesand underscores are interchangeable most places in Sass, includingmixinsandSass functions. N O T E ! They aren’t interchangeable in the plain-CSS partsof Sass like class, ID, or property names, though. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 33. Variables — The Default Value SCSS $title: 'MyBlog'; $title: 'AboutMe'; h2:before { content:$title; } CSS h2:before { content: 'About Me'; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 34. Variables, The Default Flag — Variable definitions can optionally take the !default flag: SCSS $title: 'MyBlog'; $title: 'AboutMe'!default; h2:before { content:$title; } CSS h2:before { content: 'MyBlog'; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 35. Variables Scope Variables set inside adeclaration (within { }) aren't usable outside that block SCSS p { $border: #ccc; border-top: 1px solid $border; } h1 { border-top: 1px solid $border; } ruby Syntax error: Undefined variable: "$border" Sass and Compass Workshop - ©2014 Shaho Toofani
  • 36. Variables Scope Setting new valuestovariables set outside a declaration changesfuture instances SCSS $color-base: #777; .sidebar { $color-base: #222; background: $color-base; } p { color: $color-base; } CSS .sidebar { background: #222222; } p { color: #222222; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 37. Variables in real world SCSS $page_width: 960px; $nav_tabs: 6; $tab_width:round($page_width- $nav_tabs) - 1; SCSS $page_width: 960px; $nav_tabs: 7; $tab_width:round($page_width- $nav_tabs) - 1; Sass and Compass Workshop - ©2014 Shaho Toofani
  • 38. What about CSS variables? N O T E ! Currently aW3C working draft, “CSS Variables Module Level 1,” isbeingdeveloped: http://www.w3.org/TR/css-variables — Define a CSS variable: CSS :root { var-color-main: #333; } — Use the variable within a declaration: CSS #main p { color: var(color-main); } The proposal uses a var prefix to define the variable but a var(variable-name) syntax for values. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 39. OPERATIONS Sass and Compass Workshop - ©2014 Shaho Toofani
  • 40. Operations SCSS $column: 10%; $margin: 16px; .island { width: $column*4; margin:$margin*2 $margin/2 $margin+20 $margin; padding:$margin*0.25; } CSS .island { width: 40%; margin: 32px8px36px 16px; padding: 4px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 41. Variables & Operations — Interpolation (escaping) CSS p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; } — Wrap with #{ } Interpolation brackets #{} : That’sa special way to alert Sass to compile something within aselector or property name; useful for paths & long strings. SCSS $basetypesize: 1em; p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 42. Variables & Operations — Negatives SCSS $margin: 10px; .moveup{ margin:-$margin*4 -$margin*2 0 $margin; } CSS .moveup { margin: -60px 0 10px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 43. Variables & Operations — Negatives Wrapin brackets: (-$variable*value) SCSS $margin: 10px; .moveup{ margin:(-$margin*4)(-$margin*2) 0 $margin; } CSS .moveup { margin: -40px-20px0 10px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 44. NESTING Sass avoids repetition by nesting selectors within one another. The same thingworkswith properties. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 45. NESTING RULES — Nest & indent Nest CSS rulesinside each other insteadof repeatingselectors in separate declarations CSS header[role="banner"] { margin: 20px0 30px0; border-bottom: 4px solid #333; } header[role="banner"] #logo { float: left; margin: 0 20px 0 0; } header[role="banner"] #logo img { display: block; opacity: .95; } SCSS header[role="banner"] { margin: 20px0 30px0; border-bottom: 4px solid #333; #logo { float:left; margin: 0 20px0 0; img{ display:block; opacity:.95; } } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 46. NESTING RULES — Nesting namespaces CSS h4 { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps; } SCSS h4 { font: { family: Georgia,Serif; style:normal; weight: bold; variant: small-caps; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 47. NESTING RULES — Nest child and sibling combinators SCSS article{ > h2 {border-top: 1px dashed #eee } // childcombinator ~ section {padding-top:1.5em } // general siblingcombinator + footer {margin-top: 0 } // adjacentsiblingcombinator * {color: #000 } } CSS article> h2 { border-top:1pxdashed #eee } article~ section { padding-top: 1.5em } article+ footer { margin-top: 0 } article* { color: #000 } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 48. REFERENCING PARENT SELECTORS WITH & — Pulls the parent selector into the & CSS a { font-weight: bold; text-decoration: none; color: red; border-bottom: 2px solid red; } a:hover{ color: blue; border-color: blue; } SCSS a { font-weight:bold; text-decoration:none; color: red; border-bottom: 2px solid red; &:hover { color:blue; border-color: blue; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 49. REFERENCING PARENT SELECTORS WITH & — While nesting, the & symbol references the parent selector SCSS .content { border: 1px solid #ccc; padding: 20px; .info { border-color: red; } &.info { border-color: green; } } CSS .content { border: 1px solid #ccc; padding: 20px; } .content .info { border-color: red; } .content.info { border-color: green; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 50. REFERENCING PARENT SELECTORS WITH & — Ampersand & prepends before parent selector CSS section.main p { margin: 0 0 20px0; font-size: 18px; line-height: 1.5; } body.storesection.main p { font-size: 16px; line-height: 1.4; } SCSS section.main p { margin: 0 0 20px0; font-size: 18px; line-height: 1.5; body.store &{ font-size: 16px; line-height: 1.4; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 51. REFERENCING PARENT SELECTORS WITH & — & loves working with Modernizr SCSS button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 } } CSS button { background: linear-gradient(#444,#222); } .no-cssgradients button { background: #333 } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 52. Wrap up! - Variables, Nesting SCSS $size :16px; h1 { font: { family: Arial, sans-serif; size:$size; } .introduction &{ font:{ family: "monaco", Arial, sans-serif; size: $size*1.5; } } } CSS h1 { font-family: Arial,sans-serif; font-size: 16px; } .introduction h1 { font-family: "monaco",Arial,sans-serif; font-size: 24px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 53. Nesting Pitfalls N O T E ! Nestingiseasy, but dangerous! Do not nest unnecessarily; Try limitingyour nesting to 3 or 4 levels and consider refactoring anything deeper. SCSS .content { background: #ccc; .cell { h2 { a { &:hover { color: red; } } } } } CSS .content { background: #ccc; } .content .cell h2 a:hover{ color: red; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 54. COMMENTING IN SASS — Multi-line comments SCSS /* Thisisa multi-line comment thatwill appear in the final .css file. */ — Multi-line (Loud) comments SCSS /*!This isa multi-line commentthat will appear in the final .css file. Evenin compressed style. */ — Single-line (Silent) comments Single-line comments use the // prefix at the beginning of each line andaren’t included in the final output SCSS // Thisisa single-line comment. // Single-linecomments are removedfromthe .css file. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 55. MIXINS mixins allow youtore-use whole chunks of CSS, propertiesor selectors. Youcan even give them arguments. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 56. MIXINS — Mixins allow you to easily share styles among different parts of the stylesheet. CSS ul.plain { color: #444; list-style: none; } ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0; } SCSS @mixin no-bullets { list-style: none; li { list-style-image:none; list-style-type: none; margin-left: 0; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 57. MIXINS — Mixins allow you to define and reuse blocks of styles SCSS @mixin round-corner ($radius:4px) { -webkit-border-radius: $radius; -moz-border-radius:$radius; border-radius: $radius; } begin with @mixin give it a name addyour $variable(s) give (an) optional default value(s) and... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 58. MIXINS — Call it with @include SCSS .message { width: 100px; @includeround-corner(10); } CSS .message { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 59. MIXINS — Mixin with Multiple Arguments arguments are comma-seperatedand passedin order SCSS @mixin button($radius,$color) { border-radius: $radius; color: $color; } .btn-a { @includebutton(4px,#000); } CSS .btn-a { border-radius: 4px; color: #000; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 60. MIXINS — Mixin with Multiple Arguments toofew arguments SCSS @mixin button($radius,$color) { border-radius: $radius; color: $color; } .btn-a { @includebutton(4px); } ruby Syntax error: Mixin button is missingargument $color. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 61. MIXINS — Mixin with Multiple Arguments Optional arguments SCSS @mixin button($radius,$color: #000){ border-radius: $radius; color: $color; } .btn-a { @includebutton(4px); } CSS .btn-a { border-radius: 4px; color: #000; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 62. MIXINS — Mixin with Multiple Arguments Optionals come last! SCSS @mixin button($color:#000, $radius){ border-radius: $radius; color: $color; } .btn-a { @includebutton(4px); } ruby Syntax error: Required argument $color mustcome before any optional arguments. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 63. MIXINS — Mixin with Multiple Arguments Keywordarguments allow passing in any order SCSS @mixin button($radius,$color: #000){ border-radius: $radius; color: $color; } @include button($color: #777, $radius: 5px); } CSS .btn-a { border-radius: 5px; color: #777777; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 64. CSS3 LOVES MIXINS — box-shadow SCSS @mixin shadow($x, $y,$blur,$color){ -webkit-box-shadow:$x $y $blur $color; -moz-box-shadow:$x $y $blur $color; box-shadow:$x $y $blur $color; } SCSS #sidebar { @includeshadow(0, 1px, 2px, rgba(0,0,0,.5)); } CSS #sidebar { -webkit-box-shadow: 0, 1px,2px, rgba(0,0,0,.5); -moz-box-shadow: 0, 1px,2px, rgba(0,0,0,.5); box-shadow: 0, 1px,2px,rgba(0,0,0,.5); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 65. Mixins - Variable Arguments CSS .btn-a { -webkit-transition: color 0.3sease-in, background 0.5sease-out; -moz-transition: color 0.3sease-in, background 0.5sease-out; transition: color 0.3s ease-in, background 0.5s ease-out; } — Passing valid, comma-separated CSS as a single value SCSS @mixin transition($val) { -webkit-transition:$val; -moz-transition:$val; transition: $val; } .btn-a { @include transition(color0.3s ease-in, background0.5s ease-out); } — will throw an ERROR ... ruby Mixin transition takes1 argument but 2 were passed. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 66. Mixins - Variable Arguments — Variable Arguments Adding ... to an argument creates avariable argument (vararg) SCSS @mixin transition($val...) { -webkit-transition:$val; -moz-transition:$val; transition: $val; } .btn-a { @includetransition(color 0.3s ease-in, background 0.5s ease-out); } CSS .btn-a { -webkit-transition: color 0.3s ease-in, background 0.5s ease-out; -moz-transition: color 0.3s ease-in, background 0.5s ease-out; transition: color 0.3s ease-in, background0.5sease-out; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 67. Mixins - Variable Arguments — Variable arguments in reverse Previous example: passinga list which is split into arguments by the mixin SCSS @mixin button($radius,$color) { border-radius: $radius; color: $color; } $properties: 4px, #000; .btn-a { @includebutton($properties...); } CSS .btn-a { border-radius: 4px; color: #000; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 68. CSS3 LOVES MIXINS — gradient SCSS @mixin linear-gradient($from,$to) { background-color: $to; background-image: -webkit-linear-gradient(top, $from, $to); background-image: -moz-linear-gradient(top, $from, $to); background-image: -ms-linear-gradient(top, $from, $to); background-image: -o-linear-gradient(top,$from,$to); background-image: linear-gradient(to bottom,$from,$to); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$t -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='$from',endColors } SCSS .demo { width:300px; height:300px; @includelinear-gradient(#444, #0000ff); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 69. INTERPOLATION — Use interpolation inside Mixins - gradient revisited SCSS @mixin linear-gradient($from,$to) { background-color: $to; background-image: -webkit-linear-gradient(top, $from, $to); background-image: -moz-linear-gradient(top, $from, $to); background-image: -ms-linear-gradient(top, $from, $to); background-image: -o-linear-gradient(top,$from,$to); background-image: linear-gradient(to bottom,$from,$to); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}',endColorstr= -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}',endCol } SCSS .demo { width:300px; height:300px; @includelinear-gradient(#444, #0000ff); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 70. @EXTEND The @extend directive (tells) Sassthat one selector shouldinherit the styles of another selector. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 71. @extend directive — The @extend directive is used to extend another style. Nest @extend .classname Goes inside another class Don’t have to use multiple classes Association isin CSS not HTML CSS .button { background: blue; color: white; padding:0.2em 0.8em; border-radius:0.4em; } SCSS .button-delete{ @extend .button; background: red; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 72. @extend directive — Selector inheritance SCSS .box{ padding: 2em; color: black; background-color: white; } .warning-box { @extend .box; border: 2px dotted red; } .success-box { @extend .box; border: 2px dotted chartreuse; } .info-box { @extend .box; border: 2px dotted blue; } CSS .box, .warning-box, .success-box, .info-box { padding: 2em; color: black; background-color: white; } .warning-box { border: 2px dotted red; } .success-box { border: 2px dotted chartreuse; } .info-box { border: 2px dotted blue; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 73. Multiple @extends Youcan also @extend multiple classes within adeclaration, which chainstogether all the stylesfrom each class: SCSS $color-accent: #ea4c89; .alert { padding: 15px; font-size: 1.2em; text-align: center; background: $color-accent; } .important{ font-size: 4em; } SCSS .alert-positive { @extend .alert; @extend .important; background: #9c3; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 74. Multiple @extends Which will compile to: CSS .alert, alert-positive { padding: 15px; font-size: 1.2em; text-align: center; background: #ea4c89; } .important, .alert-positive { font-size: 4em; } .alert-positive { background: #9c3; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 75. PLACEHOLDER Sass and Compass Workshop - ©2014 Shaho Toofani
  • 76. Using placeholder selectors with @extend Placeholder selectorsallow you to define classes that won’t appear in the outputted CSS on their own. Youcan reference placeholders using @extend. SCSS %button{ padding: 10px; font-weight:bold; border-radius: 6px; } SCSS .submit{ @extend %button; background: green; } CSS .submit { padding: 10px; font-weight: bold; border-radius: 6px; background: green; }Sass and Compass Workshop - ©2014 Shaho Toofani
  • 77. Using placeholder selectors with @extend — Use placeholder selectors to extend styles only when needed SCSS %box{ padding: 2em; color: black; background-color: white; } .warning-box { @extend %box; border: 2px dotted red; } .success-box { @extend %box; border: 2px dotted chartreuse; } .info-box { @extend %box; border: 2px dotted blue; } CSS .warning-box, .success-box, .info-box { padding: 2em; color: black; background-color: white; } .warning-box { border: 2px dotted red; } .success-box { border: 2px dotted chartreuse; } .info-box { border: 2px dotted blue; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 78. Using placeholder selectors with @extend — Define clearfix as placeholder Output will be:SCSS %clearfix { &:after { content: ""; display: block; clear:both; } } SCSS #container{ position:relative; min-width: 42.5em; @extend %clearfix; } CSS #container:after { content: " "; display: block; clear: both; } #container{ position: relative; min-width: 42.5em; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 79. .sass IndentedSass Sass and Compass Workshop - ©2014 Shaho Toofani
  • 80. .scss vs .sass — Indented syntax (.sass) relies on whitespace to simplify SCSS .content { border: 1px solid #ccc; padding: 20px; h2 { font-size: 3em; margin: 20px 0; } } SASS .content border: 1px solid #ccc padding: 20px h2 font-size: 3em margin: 20px 0 Sass and Compass Workshop - ©2014 Shaho Toofani
  • 81. .scss vs .sass — Mixin declaration SCSS @mixin box-sizing($x){ -webkit-box-sizing:$x; -moz-box-sizing: $x; box-sizing:$x; } .content { @includebox-sizing(border-box); } SASS =box-sizing($x) -webkit-box-sizing: $x -moz-box-sizing: $x box-sizing: $x .content +box-sizing(border-box) Readmore: Sassvs. SCSS: which syntax is better? Sass and Compass Workshop - ©2014 Shaho Toofani
  • 82. FUNCTIONS Sass and Compass Workshop - ©2014 Shaho Toofani
  • 83. Writing functions in Sass A function is aself contained tool to generate a value that can be usedelsewhere. The result of afunction can be usedin a mixin or directly intothe style sheet. SCSS @function fluid-it() { @return 35%; //alwaysreturn35% } .sidebar { width: fluid-it(); } The @return directive tells Sasstoreturn something: CSS .sidebar { width: 35%; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 84. Writing functions in Sass — Function with arguments SCSS @function square($value) { @return ($value*$value); } p { margin-left:square(2px); } Will return: CSS p { margin-left: 4px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 85. Writing functions in Sass — Use functions target / context For example, If the target size of our sidebar is 400px and the context of itsparent is 1000px: SCSS @function fluid-it($target, $context) { @return ($target/ $context) * 100%; } .sidebar { width:fluid-it(400, 1000); } CSS .sidebar { width: 40%; } Create a CSS grid using calc() Sass and Compass Workshop - ©2014 Shaho Toofani
  • 86. COLORS Sass and Compass Workshop - ©2014 Shaho Toofani
  • 87. Colors — Built-in color functions SCSS $linkcolor: #ce4dd6; a { color: $linkcolor; &:hover { color:lighten($linkcolor, 30%); } &:active{ color:darken($linkcolor, 30%); } } CSS a { color: #ce4dd6; } a:hover{ color: #f0c9f3; } a:active { color: #6b1a70; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 88. Colors — RGB Functions SCSS rgb($red, $green, $blue) Createsa Colorfrom red, green, and blue values. Createsa Colorfrom red, green, blue, and alpha values. SCSS rgba($red,$green,$blue,$alpha) Getsthe red componentof a color. SCSS red($color) Mixes two colors together. SCSS mix($color-1, $color-2) SassRGB Functions(List) Sass and Compass Workshop - ©2014 Shaho Toofani
  • 89. Colors — The RGBA function SCSS a {color:rgba(blue, 0.75) } p {background:rgba(#ffa, 0.25)} CSS a { color: rgba(255, 255, 170, 0.25) } p { background: rgba(255, 255, 170, 0.25) } — Inspecting Colors SCSS $color:red; // #ff0000 hue($color); // 0 deg saturation($color); // 100% lightness($color); // 50% red($color); // 100 green($color); // 0 blue($color); // 0 alpha($color); // 100 Sass and Compass Workshop - ©2014 Shaho Toofani
  • 90. Colors — Manipulating Colors Sass and Compass Workshop - ©2014 Shaho Toofani
  • 91. Colors N O T E ! HSLA Colors Hue Hue is a degree onthe colorwheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers inbetweenreflect differentshades. Saturation is apercentage value; 100% is the full color. 0% is completely denatured (grayscale). Lightness is alsoa percentage; 0% is dark (black), 100% is light (white),and 50% is the average. Alpha Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent. Yay for HSLa Sass and Compass Workshop - ©2014 Shaho Toofani
  • 92. Colors — HSLA Manipulations SCSS adjust-hue(#77a7f9, 90); SCSS saturate(#9b8a60, 50%); SCSS darken(#6cf620, 30%); SCSS adjust-hue(#77a7f9, -90); SCSS desaturate(#d9a621, 50%); SCSS lighten(#2e7805, 50%); Sass and Compass Workshop - ©2014 Shaho Toofani
  • 93. Colors — change-color: Set any property of a color SCSS change-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness], SCSS change-color(#ba5637,$hue:60); SCSS change-color(#8e9cb3,$saturation:100); SCSS change-color(#6cf620,$green: 60, $blue: 100); Sass and Compass Workshop - ©2014 Shaho Toofani
  • 94. Colors — adjust-color: Incrementally manipulate any property of a color SCSS adjust-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness], SCSS adjust-color(#d3fa7b,$hue:60, $lightness: -20%); N O T E ! Lastexampleproduce:rgba(95, 255,227,0.75); SCSS adjust-color(#5f8fe3,$green:100, $alpha: -0.25); Sass and Compass Workshop - ©2014 Shaho Toofani
  • 95. Color online examples SassMe - Visualize SASS color functionsin real-time without compiling How color worksin Sass Flatt sassy butons SassButton Generator Sassmixin for inner shadow Sasscolor function comparisons Sassand color manipulation on Codepen.io Readmore: Mixins for semi-transparent colors Controllingcolor with Sass color functions How to programmatically go from one color to another in Sass Sass and Compass Workshop - ©2014 Shaho Toofani
  • 96. MATH Sass and Compass Workshop - ©2014 Shaho Toofani
  • 97. Math — Basic Arithmetic + addition - subtraction * multiplication / division % modulo = remainder from a division operation. 12 % 3 results in 0, while 12 % 5 returns2. Math operators( +, -, *, /, % ) work with numbers SCSS 1em+ 1em; // 2em 1em- 1em; // 0em 1in+ 72pt; // 2in 6px* 4; // 24px 18 %5; // 3 Sass and Compass Workshop - ©2014 Shaho Toofani
  • 98. Math — Division a special case The trickiest of the number operations, due tofont: SCSS font : 18px/ 1.45em; // 18px/1.45em font : (20px / 5); // 4px font : 20px/ 5 + 1; // 5px font : $base /5; // 4px $size : 20px / 5; // 4px width: 20px* 5 / 2; // 50px Sassdefaults to returning (up to) five digitsafter adecimal point. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 99. Math — String Addition Addition on strings concatenates them: SCSS $family: "Helvetica " + "Neue"; // "Helvetica Neue" Initial left-side string determinespost-concatenation quotes: SCSS $family: 'sans-' +serif //'sans-serif' $family: sans-+ 'serif' //sans-serif Sass and Compass Workshop - ©2014 Shaho Toofani
  • 100. Math — Pre-Defined Math Utilities round($number) - roundtoclosest whole number ceil($number) - roundup floor($number) - rounddown abs($number) - absolute value min($list)- minimum list value max($list)- maximum list value percentage($number) - convert topercentage Number Functions SCSS percentage(13/25) //52% round(2.4) //2 ceil(2.2) //3 floor(2.6) //2 abs(-24) //24 Sass and Compass Workshop - ©2014 Shaho Toofani
  • 101. CONTROL DIRECTIVE Sass and Compass Workshop - ©2014 Shaho Toofani
  • 102. Logic Operators — Comparison (Equality) operators The equality operatorscan be used on everything (stringsof text and numbers). == means equal to != not equal to — Relational operators Sassallowsthe use of relational operatorson numbers: > greater than >= greater than or equal to < less than <= lessthan or equal to Sass and Compass Workshop - ©2014 Shaho Toofani
  • 103. Logic Operators Relational operators ( <, >, <=, >= ) evaluate numbers SCSS 1 <20 // true 10 <= 20 // true 4 >1 // true 4 >= 1 // true Comparison operators ( ==, != ) evaluate all data types SCSS 1 +1 == 2 // true small !=big // true #000==black // true white != #fff // false Sass and Compass Workshop - ©2014 Shaho Toofani
  • 104. Control DIRECTIVE — @if statement Using @if, we can conditionally output code SCSS $theme:dark; header { @if $theme == dark { background: #000; } } CSS header { background: #000; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 105. Control DIRECTIVE — The @if and @else if control directives @else providesa fallback if everythingevaluates false or null SCSS $theme:light; header { @if $theme == dark { background: #000; } @else{ background: #fff; } } CSS header { background: #fff; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 106. Control DIRECTIVE — The @if and @else if control directives @else if allowsfor multiple comparisons: SCSS $theme:pink; header { @if $theme == dark { background: #000; }@else { background: #fff; }@else if $theme ==pink { background:pink; } } CSS header { background: pink; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 107. Control DIRECTIVE — The Single-line if function if( condition, "true value", "false value" ) SCSS $theme:light; header { @if $theme == dark { color: #000; }@else { color: #fff; } } SCSS $theme:light; header { color:if($theme == dark, #000, #fff) } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 108. Control DIRECTIVE — The @for loop The @for directive repeatedly outputs aset of styles. A counter variable isjust aplaceholder for the current state of the loop; it increments with each iteration of the loop. SCSS @for$ifrom 1to 6 { span-#{$i} { width: 20px+ ($i* 20px); } } CSS span-1 { width: 40px; } span-2 { width: 60px; } span-3 { width: 80px; } span-4 { width: 100px; } span-5 { width: 120px; } So, where is the span-6?! Sass and Compass Workshop - ©2014 Shaho Toofani
  • 109. Control DIRECTIVE — The @for loop SCSS @for$ifrom 1through 6 { span-#{$i} { width: 20px+ ($i* 20px); } } CSS span-1 { width: 40px; } span-2 { width: 60px; } span-3 { width: 80px; } span-4 { width: 100px; } span-5 { width: 120px; } span-6 { width: 140px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 110. Lists — Lists: A comma- or space-separated group of values Lists are just a series of other values, separatedby either spaces or commas. SCSS $colors: red, green, blue, yellow; $margin: 40px 0 20px 100px; $items: "item-1" "item-2" "item-3"; $items-comma: "item-1", "item-2", "item-3"; $my-font-face:Helvetica,Arial,sans-serif; Readmore: Understanding Sasslists Sass and Compass Workshop - ©2014 Shaho Toofani
  • 111. Lists — Sass list functions length - number of items in alist: SCSS $colors: red greenblue yellow; $size: length($colors); //4 append - adds avalue to the endof a list: SCSS $colors: red greenblue yellow; $all: append($colors,black); //redgreen blueyellowblack join - combinestwo liststogether: SCSS $colos1: red green; $colors2: blueyellow; $all: join($colors1, $colors2) // red greenblue yellow Sass and Compass Workshop - ©2014 Shaho Toofani
  • 112. Lists — Sass list functions (continued) index - returnsa value'slist position or false: SCSS $colors: red greenblue yellow; $i:index($colors,red); //1 (starts at 1not 0) $i:index($colors,black); //false nth - return the item at list position n: SCSS $colors: red greenblue yellow; $i:nth($colors, 3); //blue Sass and Compass Workshop - ©2014 Shaho Toofani
  • 113. Lists — Sass list functions (continued) zip- combineslists in comma-separatedpairs: SCSS $colors: red blue; $sense:warm cold; $all: zip($colors,$sense); red warm blue cold Sass and Compass Workshop - ©2014 Shaho Toofani
  • 114. Control DIRECTIVE — The @each loops The @each directive isuseful toloop through alist of items. SCSS $logos:puma nike adidas; @each $logoin$logos{ .#{$logo}{ background:url(#{$logo}.jpg); } } CSS .puma { background: url(puma.jpg); } .nike { background: url(nike.jpg); } .adidas { background: url(adidas.jpg); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 115. Control DIRECTIVE — The @while loop @while requiresmanually updating the index. SCSS $level: 0; @while $level < 5 { .tag-#{$level+ 1} { font-size:.7em +($level* .5em); } $level: $level +1; } CSS .tag-1 { font-size: 0.7em; } .tag-2 { font-size: 1.2em; } .tag-3 { font-size: 1.7em; } .tag-4 { font-size: 2.2em; } .tag-5 { font-size: 2.7em; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 116. Control DIRECTIVE — The @while loop SCSS $i: 2; .grid { position:relative; display:block; @while $i<= 6 { &.span-#{$i} { width: $i* 30px; float: left; } $i:$i+ 2; } } CSS .grid { position: relative; display: block; } .grid.span-2 { width: 60px; float: left; } .grid.span-4 { width: 120px; float: left; } .grid.span-6 { width: 180px; float: left; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 117. PARTIALS Importingthe right way Sass and Compass Workshop - ©2014 Shaho Toofani
  • 118. @import, The Legacy way master.csscontaines: CSS @import'reset.css'; @import'base.css'; @import'layout.css'; @import'typography.css'; . . Sass and Compass Workshop - ©2014 Shaho Toofani
  • 119. Partials, Importing the right way Enter the @import rule, which Sass extends to allow the importingof multiple SCSS files, merging them into asingle CSS file when compiled. A single CSS meansfewer HTTP connections. Performance! Variables can be defined in their own file, then importedwhenever needed. Imported SCSS files can contain project-agnostic mixins that can be shared and reused. Filename startswith an underscore, for example _mixins.scss Sass and Compass Workshop - ©2014 Shaho Toofani
  • 120. Partials — Use @import to merge chunks of your SCSS into one file. OR SCSS @import"colors.scss"; @import"mixins.scss"; @import"grid.scss"; SCSS @import"colors"; @import"mixins"; @import"grid"; Sass and Compass Workshop - ©2014 Shaho Toofani
  • 121. Partials — Separate partials for: and grids, typography, colors, forms, tables mixins & variables different post types for blogs media queries site sub-sections reset normalize On compile, Sass will import the partials andoutput the relevant CSS where they are placed. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 122. Media Query @media directives in Sassbehave just like they doin plain CSS, with one extracapabilities. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 123. Media Query — CSS Media Query One of the foundationsof building responsive websites isthe CSS mediaquery. The ability to “listen” to the browser’s viewport for varying dimensions and then apply certain stylesbased on those dimensions is the cornerstone of creating flexible layoutsthat adapt to different devices. CSS .sidebar { float: right; width: 300px; } @media screen and (max-width: 480px){ .sidebar { float: none; width: 100%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 124. Media Query — Responsive Web Design in Sass — @media Directive CSS .sidebar { float: right; width: 300px; } @media screen and (max-width: 480px){ .sidebar { float: none; width: 100%; } } SCSS .sidebar { float: right; width: 300px; @media screenand (max-width:480px){ float:none; width: 100%; } } begin with @media write mediaqueries asnormal if it appears within arule, it will ‘bubble up’ and put the selectors within the rule. media queries can be nested combined with the andrule Sass and Compass Workshop - ©2014 Shaho Toofani
  • 125. Media Query — Nested Media Queries In Sass, you can nest media queriesinside the original declaration, andthey will “bubble up” into their own separate declarationswhen the stylesheet is compiled. SCSS section.main { float: left; width: 65%; font-size: 16px; line-height: 1.4; @media screenand (max-width: 800px) { float:none; width:auto; } @media screenand (max-width: 500px) { font-size: 12px; line-height: 1.4; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 126. Media Query Nestingmedia queriesavoidsrewriting the selector (section.main in this example) each time you’d like to make adjustments for various breakpoints. CSS section.main { float: left; width: 65%; font-size: 16px; line-height: 1.4; } @media screen and (max-width: 800px){ section.main { float: none; width: auto; } } @media screen and (max-width: 500px){ section.main { font-size: 12px; line-height: 1.4; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 127. Media Query — Using variables to define breakpoints SCSS $width-small: 500px; $width-medium: 800px; $width-large: 1200px; section.main { font-size: 16px; line-height: 1.4; @media screenand (max-width: $width-large) { float:left; width: 65%; } @media screenand (max-width: $width-medium){ float:none; width:auto; } @media screenand (max-width: $width-small) { font-size: 12px; line-height: 1.4; } }Sass and Compass Workshop - ©2014 Shaho Toofani
  • 128. Media Query Output: CSS section.main { font-size: 16px; line-height: 1.4; } @media screen and (max-width: 1200px) { section.main { float: left; width: 65%; } } @media screen and (max-width: 800px){ section.main { float: none; width: auto; } } @media screen and (max-width: 500px){ section.main { font-size: 12px; line-height: 1.4; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 129. Media Query Going astep further, youcan also define an entire mediaquery as avariable: SCSS $mobile-first: "screenand (min-width: 300px)"; @media #{$mobile-first} { .content { font-size: 14px; line-height: 1.5; } } CSS @media screen and (min-width: 300px){ .content { font-size: 14px; line-height: 1.5; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 130. Media Query — Combining @content blocks and mixins By using Sass’s @content directive, youcan pass entire blocks of stylestoa mixin, and Sasswill place those blocks back intothe declaration that calls the mixin. SCSS $width-small: 400px; $width-medium: 760px; $width-large: 1200px; @mixin responsive($width){ @if $width == wide-screens{ @mediaonly screenand (max-width: $width-large) {@content;} } @else if$width == medium-screens { @mediaonly screenand (max-width: $width-medium){ @content; } } @else if$width == small-screens { @mediaonly screenand (max-width: $width-small) {@content;} } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 131. Media Query @content - passa block of properties toa mixin SCSS .leftside { float: left; width: 70%; @includeresponsive(wide-screens){ width: 80%; } @includeresponsive(medium-screens) { width: 50%; font-size: 14px; } @includeresponsive(small-screens){ float:none; width: 100%; font-size: 12px; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 132. Media Query Will output: CSS .leftside { float: left; width: 70%; } @media onlyscreenand(max-width: 1200px) { .leftside { width: 80%; } } @media onlyscreenand(max-width: 760px) { .leftside { width: 50%; font-size: 14px; } } @media onlyscreenand(max-width: 400px) { .leftside { float: none; width: 100%; font-size: 12px; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 133. Media Query and... SCSS h1 { font-size: 40px; @includeresponsive(wide-screens){ font-size: 48px;} @includeresponsive(medium-screens) { font-size: 32px; } @includeresponsive(small-screens){ font-size: 20px;} } CSS h1 { font-size: 40px; } @media onlyscreenand(max-width: 1200px) { h1 { font-size: 48px; } } @media onlyscreenand(max-width: 760px) { h1 { font-size: 32px; } } @media onlyscreenand(max-width: 400px) { h1 { font-size: 20px; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 134. Media Query — Media Query Retrofitting SCSS .sidebar { border: 1px solid #ccc; @media (min-width: 700px) { float:right; width: 30%; } } CSS .sidebar { border: 1px solid #ccc; } @media (min-width: 700px){ .sidebar { float: right; width: 30%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 135. Media Query — Media Query Retrofitting SCSS @mixin respond-to { @media (min-width: 700px) { @content } } .sidebar { border: 1px solid #ccc; @includerespond-to{ float:right; width: 30%; } } CSS .sidebar { border: 1px solid #ccc; } @media (min-width: 700px){ .sidebar { float: right; width: 30%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 136. Media Query — Media Query Retrofitting SCSS @mixin respond-to ($media) { @if $media ==tablet{ @media(min-width: 700px){ @content } } } .sidebar { border: 1px solid #ccc; @includerespond-to(tablet){ float: right; width: 30%; } } CSS .sidebar { border: 1px solid #ccc; } @media (min-width: 700px){ .sidebar { float: right; width: 30%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 137. Media Query — Media Query Retrofitting SCSS @mixin respond-to($query){ @media (min-width: $query){ @content } } .sidebar { border: 1px solid #ccc; @includerespond-to(900px){ float:right; width: 30%; } } CSS .sidebar { border: 1px solid #ccc; } @media (min-width: 900px){ .sidebar { float: right; width: 30%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 138. Media Query — General Respond-To Mixin SCSS @mixin respond-to($value,$query) { @media ($value: $query){ @content } } .sidebar { border: 1px solid #ccc; @includerespond-to(max-width, 600px) { float:right; width: 30%; } } CSS .sidebar { border: 1px solid #ccc; } @media (min-width: 600px){ .sidebar { float: right; width: 30%; } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 139. COMPASS Compass is an open-source CSS Authoring Framework. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 140. WHAT IS Compass? — Compass is an open-source CSS Authoring Framework. Looks like an extension to Sass Compasswasthe first Sass-basedframework We get access to lotsandlots of reusable patterns and tools for easily creating CSS Compasslets you write CSS3 goodieslike box-shadow, gradients and ... with a single syntax It magically creates cross-browser compatible CSS of everything It provides Mixins, helpers, New Functions, reset andmore Sass and Compass Workshop - ©2014 Shaho Toofani
  • 141. WHAT IS Compass? — Official Website: http://compass-style.org — GitHub development homepage: https://github.com/chriseppstein/compass Sass and Compass Workshop - ©2014 Shaho Toofani
  • 142. INSTALLING COMPASS — Command prompt(line) install ruby geminstallcompass You’ve just installedCompass. Double-check: ruby Fetching: compass-0.12.2.gem(100%) Successfully installedcompass-0.12.2 1 gem installed Installingri documentation for compass-0.12.2... InstallingRDocdocumentation for compass-0.12.2... ruby compass-v It should return: ruby Compass 0.12.2(Alnilam) Sass and Compass Workshop - ©2014 Shaho Toofani
  • 143. Useful Commands — Check which versions of Compass are available ruby gemlist compass –a –r — Installing the latest pre-release version ruby geminstallcompass --pre — Uninstall a specific version of Compass versionnumber is the release youwant toremove (for example, 0.12.2). ruby gemuninstall compass--version versionnumber Sass and Compass Workshop - ©2014 Shaho Toofani
  • 144. Create a Sass and Compass project — Compass's built-in create command to make a project in the folder specified ruby compasscreatenew-project — Or just run following inside a folder ruby compasscreate — Set up an existing project with compass - ( )more ruby compassinstallcompass — Automatic compile to CSS from the Command Line ruby compasswatch Sass and Compass Workshop - ©2014 Shaho Toofani
  • 145. Default Workflow in Compass — What are the generated files in a Compass project for? .sass-cache: This folder will contain the cache filesthat Sass usestobuild your CSS files faster. Youdon't needtodoanything with it. sass: Thisfolder will store the Sass filesthat will be written or amended. This folder can be called anything, but 'sass' is the default name. stylesheets: This folder will contain the compiledCSS filesthat Sass will generate. It can be called anything, but stylesheetsisthe default folder name in Compass projects. config.rb: Thisfile containsthe configuration defaults for a project, what the various foldersare called, andwhere they are located. It alsocontrols the compression style of the generated CSS. Sass and Compass Workshop - ©2014 Shaho Toofani
  • 146. Customizing Compass project — Create a customized Compass project ruby compasscreate--sass-dir "sass"--css-dir "css" --javascripts-dir "js"--images-dir — Creating a bare Compass project ruby compasscreate--bare--sass-dir "sass"--css-dir "css" --javascripts-dir "js"--images-dir"img" Sass and Compass Workshop - ©2014 Shaho Toofani
  • 147. Understanding the config.rb file The config.rb file isthe brain of aCompass project. It definesthe relationship between files and their assets, how andwhere the CSS shouldbe generated, andany dependenciesfor a project. ruby http_path = "/" css_dir= "stylesheets" sass_dir ="sass" images_dir= "images" javascripts_dir= "javascripts" output_style = :compressed fonts_dir = "fonts" N O T E ! Clean .sass-cache folder viaCompass: ruby compassclean Sass and Compass Workshop - ©2014 Shaho Toofani
  • 148. Importing Compass Compasscomprises five main modules: utilities typography css3 layout reset — Importing Once installed, use @import to make Compassavailable: SCSS @import"compass"; //utilities,typography, css3 @import"compass/layout"; Sass and Compass Workshop - ©2014 Shaho Toofani
  • 149. Importing Reset Addsa set of rules basedon after compiling:Eric Meyer's reset SCSS @import"compass/reset"; Avoid if you plan on using Normalize.css Sass and Compass Workshop - ©2014 Shaho Toofani
  • 150. Compass Mixins — Example with CSS3 Mixins SCSS @import"compass"; .message { @includebackground(linear-gradient(#9b9592,#3c3733)); @includeborder-radius(5px); } CSS .message { background: -webkit-linear-gradient(#9b9592,#3c3733); background: -moz-linear-gradient(#9b9592,#3c3733); background: -ms-linear-gradient(#9b9592, #3c3733); background: linear-gradient(#9b9592, #3c3733); -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 151. Compass Mixins — Radial Gradient Mixin SCSS @import"compass"; .message { @includebackground(radial-gradient(center, #9b9592,#3c3733)); } CSS .message { background: -webkit-gradient(radial, 50%,0, 50%, 100, color-stop(0%,#9b9592), color-stop(100%, #3c3733)); background: -webkit-radial-gradient(center, #9b9592,#3c3733); background: -moz-radial-gradient(center, #9b9592, #3c3733); background: -o-radial-gradient(center,#9b9592, #3c3733); background: radial-gradient(center, #9b9592,#3c3733); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 152. Compass Mixins More robust color stops are alsosupported: SCSS @import"compass"; .message { @includebackground(linear-gradient(top, #9b9592, #e79e23 75%,#3c3733)); } CSS .message { background: -webkit-gradient(linear, 50% 0%,50% 100%, color-stop(0%,#9b9592), color-stop(75%, #e79e23), color-stop(100%, #3c3733)); background: -webkit-linear-gradient(top, #9b9592, #e79e23 75%,#3c3733); background: -moz-linear-gradient(top,#9b9592, #e79e23 75%,#3c3733); background: -o-linear-gradient(top, #9b9592,#e79e23 75%, #3c3733); background: linear-gradient(top, #9b9592,#e79e23 75%, #3c3733); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 153. Compass Mixins — Text shadow with default values SCSS @import"compass"; $default-text-shadow-color: #ccc; $default-text-shadow-blur: 0; $default-text-shadow-h-offset: 3px; $default-text-shadow-v-offset: 4px; SCSS .headline { @includetext-shadow; } CSS .headline { text-shadow: 3px4px 0 #cccccc; } More... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 154. Compass Mixins — Multiple columns SCSS @import"compass"; p.three-cols { @includecolumn-count(4); @includecolumn-gap(100px); @includecolumn-rule(1px, dotted, lighten(blue, 14%)); } CSS p.three-cols { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 100px; -webkit-column-gap: 100px; column-gap: 100px; -moz-column-rule: 1px dotted #4747ff; -webkit-column-rule: 1px dotted #4747ff; column-rule: 1pxdotted#4747ff; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 155. Compass mixins — Clearfix, different approaches SCSS @import"compass"; .box{ @includeclearfix; } CSS .box { overflow: hidden; *zoom: 1; } SCSS @import"compass"; .other-box{ @includepie-clearfix; } CSS .other-box{ *zoom: 1; } .other-box:after { content: ""; display: table; clear: both; } Micro clearfix hack Sass and Compass Workshop - ©2014 Shaho Toofani
  • 156. Compass's text replacement mixins — The hide-text mixin SCSS @import"compass"; .hideme{ @includehide-text; } CSS .hideme { text-indent: -119988px; overflow: hidden; text-align: left; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 157. Compass's text replacement mixins — The squish-text mixin squish-text isto squish text inline if youwant it tobe visually hidden but still accessible toscreen readers. SCSS @import"compass"; .ir{ @includesquish-text; } CSS .ir{ font: 0/0 serif; text-shadow: none; color: transparent; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 158. Compass mixins — General utilities Browser Hacks Clearfxes Resets — Element styles Links Lists Float Tables Text — CSS3 gradients background-size border-radius box-shadow box-sizing CSS3 PIE font-face opacity transform transition more... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 159. Enable relative assets ruby # Toenablerelative paths toassetsviacompass helper functions. Uncomment: relative_assets= true Thissetting (not enabledby default sojust uncomment it) allowsCompass helpers to know that if an image is specified (for example), it knows where to find it relative tothe CSS — For example CSS background-image: url('../img/image.jpg'); — Do: SCSS background-image: image-url('image.jpg'); Sass and Compass Workshop - ©2014 Shaho Toofani
  • 160. Compass Helper functions — Example with helper functions SCSS @import"compass"; header { background: image-url('header-bg.png'); h1 { width:image-width('logo.png'); height:image-height('logo.png'); background:inline-image('logo.png') } } CSS header { background: url('/images/header-bg.png?1351…'); } header h1 { width: 220px; height: 100px; background: url('data:image/png;base64...'); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 161. The Compass cache buster N O T E ! The Compass cache buster; it prevents browserscachingassetswhen they have changed (the value changeseach time the image'smodification time changes). CSS background-image: url('../img/logo-small.png?1357598801'); To disable it on acase-by-case basis you can do this: SCSS background-image: image-url("logo-small.png", false); To disable it globally, readmore ... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 162. Compass Helper functions — Opposite Position Returnsthe opposite side (or pair): SCSS @import"compass"; $opposite:opposite-position(top); //bottom $opposite:opposite-position(left); //right $opposite:opposite-position(right bottom); //left top Sass and Compass Workshop - ©2014 Shaho Toofani
  • 163. Compass Helper functions — Using opposite-position - CSS shapes: CSS .arrow { border: 50pxsolid transparent; border-bottom: 50pxsolid #ff4136; border-top: 0; height: 0; width: 0; } CSS Triangle SCSS @import"compass"; @mixin arrow($point) { $opposite:opposite-position($point); border: 50px solid transparent; border-#{$opposite}: 50px solid #ff4136; border-#{point}: 0; height: 0; width: 0; } .arrow { @includearrow(top); } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 164. Compass Helper functions image-url image-height image-width inline-image font-url pi sin cos tan adjust-lightness, scale-lightness adjust-saturation, scale-saturation more... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 165. Compass image sprites — Spriting with Compass Generates the sprite map & the CSS Easy to configure classes, spacing, etc Adda new image? updates automatically SCSS @import"compass"; @import"my-icons/*.png"; @include all-my-icons-sprites; CSS .my-icons-sprite, .my-icons-delete, .my-icons-edit, .my-icons-new, .my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .my-icons-delete { background-position: 0 0; } .my-icons-edit { background-position: 0 -32px; } .my-icons-new { background-position: 0 -64px; } .my-icons-save { background-position: 0 -96px; } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 166. Additional sprite configuration options — Add the height and width to each generated HTML selector SCSS $my-icons-sprite-dimensions:true; CSS .my-icons-save { background-position: 0 -96px; height: 32px; width: 32px; } — Extra padding around the images SCSS $my-icons-spacing: 10px; Spriting with Compass, Read more ... Sass and Compass Workshop - ©2014 Shaho Toofani
  • 167. Creating data URIs from images — The inline-image syntax SCSS @import"compass"; .logo { background-image: inline-image("svg/logo.svg"); } — CSS generated by that rule (truncated for brevity) CSS .logo { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN... — Easy fallbacks for non-SVG capable devices SCSS .logo { background-image: inline-image("svg/logo.svg"); .no-svg &{ background-image:image-url("png/logo.png"); } } Sass and Compass Workshop - ©2014 Shaho Toofani
  • 168. Susy grid system The homepage for Susy is http://susy.oddbird.net/ — Installing the Susy Compass plugin ruby geminstallsusy ruby Fetching: susy-1.0.9.gem (100%) Successfully installedsusy-1.0.9 1 gem installed — Including Susy in a project Open the config.rb file and enter the followingline at the top: ruby require "susy" Sass and Compass Workshop - ©2014 Shaho Toofani
  • 169. 960.gs — Building 960.gs grid system from scratch with Sass Sass and Compass Workshop - ©2014 Shaho Toofani
  • 170. Resources Manning: Sass and Compassin Action thesassway.com Sassfor Web Designers SassStyle Guide Create a CSS grid using calc() Advanced SASS Mixins & Color Functions The ExtendConcept Sass& CompassColor Functions Sass: Mixin or Placeholder? Understanding Sasslists Handy AdvancedSass Having fun with Sass lists and strings IE-friendly mobile-first CSS with Sass 3.2 Sasstag on hongkiat.com Sass and Compass Workshop - ©2014 Shaho Toofani
  • 171. That's it By |Shaho Toofani @shaho By becomingweb developers, youagreedon stayingupto date with all the new cool stuff. Someone said! Sass and Compass Workshop - ©2014 Shaho Toofani