SlideShare a Scribd company logo
Brian Hoke: WordPress & Sass @bentleyhoke 
Sass & WordPress Brian Hoke 
Bentley Hoke Interactive 
@bentleyhoke | bentleyhoke.com
This Presentation http://bent.ly/ENLX
Aside: Presentation Theme WordPress theme to generate this kind of presentation 
Implements reveal.js 
Download
What Sass? preprocessor 
language 
extends CSS
Sass Code $base-color: #c00; 
$body-font-color: lighten( $base-color, 15%); 
$page-title-color: darken( $base-color, 20%); 
$body-font-size: '13px'; 
article { 
color: $body-font-color; 
font: { 
10 
11 
12 
13 
14 
15 
16 
17 
123456789 
size: $body-font-size; 
family: Helvetica, Arial, sans-serif; 
} 
h1 { 
color: $page-title-color; 
} 
}
Compiled CSS Code article { 
color: #ff1a1a; 
font-size: "13px"; 
font-family: Helvetica, Arial, sans-serif; 
12345678 
} article h1 { 
color: #660000; 
}
Really, what is it? Script that interprets SCSS into CSS 
Sass is both the language and the script process 
Flavors – 
example 
old (indented) 
new (SCSS) 
Output is perfectly valid CSS
Various Whoops As in “Big Whoops”: 
Compression 
Variables 
Nesting 
File organization (partials & import) 
Code reuse (mixins & inheritance) 
Built-in functions & operators
Install Sass Apps 
Command line 
http://sass-lang.com/install
Command Line Installation [Windows] Install Ruby 
Windows: 
gem install sass 
[Mac] sudo gem install sass 
test it: sass -v 
Ruby Installer
How Sass? setup watch to generate CSS from changes to SCSS 
carelessly bang out some code thoughtfully plan out organization of code and files 
upload generated CSS – just like it was written directly – to production site
Setting Your Watch sass --watch themes/reveal/sass:themes/reveal --style compressed
Variables & Functions $bright-red: #f00; 
$medium-red: #c00; 
$half-opaque-white: rgba(255,255,255,0.7); 
$default-link-color: opacify($medium-red, 0.6); 
$page-title-color: darken($medium-red, 10%); 
$link-color: complement($medium-red); 
$rightleft-padding: 2.5%; 
10 
$tall-topbottom-padding: 1%; 
11 
$narrow-topbottom-padding: 0.5%; 
12 
13 
$site-width: 90%; 
14 
$main-content-width: 68%; 
15 
16 
$sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding); 
123456789
Code Organization @import 'reset'; 
@import 'assistive'; 
@import 'variables'; 
@import 'bxslider'; 
@import 'mainnav'; 
@import 'interior'; 
@import 'full_flight_info'; 
@import 'sidebar'; 
@import 'structure'; 
10 
@import 'slicknav'; 
11 
@import 'responsive'; 
123456789
Mixins Sass (from Bourbon library) 
1234 
@import 'bourbon/bourbon'; 
section { 
@include linear-gradient(to top, red, orange); 
} Resulting CSS 
12345 
section { 
background-color: red; 
background-image: -webkit-linear-gradient(bottom, red, orange); 
background-image: linear-gradient(to top, red, orange); 
}
Why Sass? Code organization: easier to maintain, team 
Performance: loads faster 
Tools: write better, faster, stronger code 
Sharing: get code from, give code to others
Code Organization easier to team 
easier to maintain 
easier to give and receive 
example: ABQ airport sites
Performance 
stitch together multiple CSS files – avoid limit on number of concurrent connections 
compression
Power inheritance and mixins offer DRY ease-of-change: great power and great responsibility 
built-in functions 
a for loop!
Sharing handing off, receiving code 
switchboarding of settings 
example: Foundation
More Info & Questions http://sass-lang.com/

More Related Content

What's hot

Document
DocumentDocument
Document
Naveed Anjum
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
Sara Cannon
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
 
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessiblerole=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
eROI
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
 
جيفيرا باي الساحل الشمالي
جيفيرا باي الساحل الشماليجيفيرا باي الساحل الشمالي
جيفيرا باي الساحل الشمالي
Reda Hassan
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sass
Huiyi Yan
 
HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219
GrezCZ
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
Dimitar Belchugov
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
 
McrFRED 39 | CSS Processors
McrFRED 39 | CSS ProcessorsMcrFRED 39 | CSS Processors
McrFRED 39 | CSS Processors
Tristan Ashley
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
Change out of box tree view style using custom css
Change out of box tree view style using custom cssChange out of box tree view style using custom css
Change out of box tree view style using custom css
Rajkiran Swain
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
 
WordPress Advanced Custom Fields - 101
WordPress  Advanced Custom Fields - 101WordPress  Advanced Custom Fields - 101
WordPress Advanced Custom Fields - 101
Leo Caseiro
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
romiguelangel
 
Sass maps, my precious! 2.0
Sass maps, my precious! 2.0Sass maps, my precious! 2.0
Sass maps, my precious! 2.0
Andréa Zambrana
 

What's hot (19)

Document
DocumentDocument
Document
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Web Typography Tips
Web Typography TipsWeb Typography Tips
Web Typography Tips
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessiblerole=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
role=drinks AMS Meetup: 5 Pro Tips for Making Your Email More Accessible
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
جيفيرا باي الساحل الشمالي
جيفيرا باي الساحل الشماليجيفيرا باي الساحل الشمالي
جيفيرا باي الساحل الشمالي
 
Modularization css with sass
Modularization css with sassModularization css with sass
Modularization css with sass
 
HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219HTML5 Boilerplate - PV219
HTML5 Boilerplate - PV219
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Xlrays online web tutorials
Xlrays online web tutorialsXlrays online web tutorials
Xlrays online web tutorials
 
McrFRED 39 | CSS Processors
McrFRED 39 | CSS ProcessorsMcrFRED 39 | CSS Processors
McrFRED 39 | CSS Processors
 
Class 3 create an absolute layout with css abs position (aptana)
Class 3  create an absolute layout with css abs position (aptana)Class 3  create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
Change out of box tree view style using custom css
Change out of box tree view style using custom cssChange out of box tree view style using custom css
Change out of box tree view style using custom css
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
WordPress Advanced Custom Fields - 101
WordPress  Advanced Custom Fields - 101WordPress  Advanced Custom Fields - 101
WordPress Advanced Custom Fields - 101
 
Sass Essentials
Sass EssentialsSass Essentials
Sass Essentials
 
Sass maps, my precious! 2.0
Sass maps, my precious! 2.0Sass maps, my precious! 2.0
Sass maps, my precious! 2.0
 

Similar to Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"

FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
Chris Schneider
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
drywallbmb
 
Breakpoint
BreakpointBreakpoint
Breakpoint
Andrea Robertson
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
Adem Ilter
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
James Pearce
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
Sayanee Basu
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
Using SASS in the WordPress environment - Ran Bar Zik
Using SASS in the WordPress environment - Ran Bar ZikUsing SASS in the WordPress environment - Ran Bar Zik
Using SASS in the WordPress environment - Ran Bar Zik
Miriam Schwab
 
Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
Serg Diniovskiy
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
Daniel Yuschick
 
Less & Sass
Less & SassLess & Sass
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
Billy Shih
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
Palestra pré processadores CSS
Palestra pré processadores CSSPalestra pré processadores CSS
Palestra pré processadores CSS
Just Digital
 
A better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UXA better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UX
JWORKS powered by Ordina
 

Similar to Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress" (20)

FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
 
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
 
Breakpoint
BreakpointBreakpoint
Breakpoint
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Using SASS in the WordPress environment - Ran Bar Zik
Using SASS in the WordPress environment - Ran Bar ZikUsing SASS in the WordPress environment - Ran Bar Zik
Using SASS in the WordPress environment - Ran Bar Zik
 
Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
 
Less & Sass
Less & SassLess & Sass
Less & Sass
 
Learn Sass and Compass quick
Learn Sass and Compass quickLearn Sass and Compass quick
Learn Sass and Compass quick
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Palestra pré processadores CSS
Palestra pré processadores CSSPalestra pré processadores CSS
Palestra pré processadores CSS
 
A better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UXA better CSS: Sass and Less - CC FE & UX
A better CSS: Sass and Less - CC FE & UX
 

Recently uploaded

SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
QingjieDu1
 
Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18
Bangladesh Network Operators Group
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
mahigarg2024#G05
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
ssuser2f6682
 
Incident Identification Approach and Managment
Incident Identification Approach and ManagmentIncident Identification Approach and Managment
Incident Identification Approach and Managment
Gaali1
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
ashishkumarrana9
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
Zsolt Nemeth
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
Piotr Siuda
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Krishna L
 
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
elbertablack
 
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Edward Blurock
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
TanapatLimsaiprom1
 
optimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluationoptimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluation
ManojKumarr75
 
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
paridubey2024#G05
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
Sweet Potato Tec
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
dilbaagsingh0898
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
ธนาพัฒน์ ลิ้มสายพรหม
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
DeepakKumar862274
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
ffg01100
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 

Recently uploaded (20)

SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
 
Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18Geolocation and Geofeed Implementation bdNOG18
Geolocation and Geofeed Implementation bdNOG18
 
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
Girls Call Mahipalpur 000XX00000 Provide Best And Top Girl Service And No1 in...
 
Web development Platform Constraints.pptx
Web development Platform Constraints.pptxWeb development Platform Constraints.pptx
Web development Platform Constraints.pptx
 
Incident Identification Approach and Managment
Incident Identification Approach and ManagmentIncident Identification Approach and Managment
Incident Identification Approach and Managment
 
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptxDraya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
Draya Michele’s Son – Kniko Howard’s Rise to Fame.pptx
 
2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage2023. Archive - Gigabajtos selfpublisher homepage
2023. Archive - Gigabajtos selfpublisher homepage
 
Digital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade communityDigital ethnography of the Polish darknet drug trade community
Digital ethnography of the Polish darknet drug trade community
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
 
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
Female Service Girls Call Delhi 9873940964 Provide Best And Top Girl Service ...
 
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECTUse of Ontologies in Chemical Kinetic Database CHEMCONNECT
Use of Ontologies in Chemical Kinetic Database CHEMCONNECT
 
Build a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat LimsaipromBuild a Professional Resume using Canva , Tanapat Limsaiprom
Build a Professional Resume using Canva , Tanapat Limsaiprom
 
optimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluationoptimized green synthesis characterization and evaluation
optimized green synthesis characterization and evaluation
 
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
Kolkata @Girls @Call WhatsApp Numbers 🫦0000XX0000🫦 List For Friendship Girls ...
 
How Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital TransformationHow Salesforce Development in the UK is Driving Digital Transformation
How Salesforce Development in the UK is Driving Digital Transformation
 
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Shimla 000XX00000 Provide Best And Top Girl Service And No1 in City
 
AWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaipromAWS Networking Basic , tanapat limsaiprom
AWS Networking Basic , tanapat limsaiprom
 
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptxIot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
Iot-Internet-of-Things_Industrial revolution 4.0-ppt.pptx
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 

Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"

  • 1. Brian Hoke: WordPress & Sass @bentleyhoke Sass & WordPress Brian Hoke Bentley Hoke Interactive @bentleyhoke | bentleyhoke.com
  • 3. Aside: Presentation Theme WordPress theme to generate this kind of presentation Implements reveal.js Download
  • 4. What Sass? preprocessor language extends CSS
  • 5. Sass Code $base-color: #c00; $body-font-color: lighten( $base-color, 15%); $page-title-color: darken( $base-color, 20%); $body-font-size: '13px'; article { color: $body-font-color; font: { 10 11 12 13 14 15 16 17 123456789 size: $body-font-size; family: Helvetica, Arial, sans-serif; } h1 { color: $page-title-color; } }
  • 6. Compiled CSS Code article { color: #ff1a1a; font-size: "13px"; font-family: Helvetica, Arial, sans-serif; 12345678 } article h1 { color: #660000; }
  • 7. Really, what is it? Script that interprets SCSS into CSS Sass is both the language and the script process Flavors – example old (indented) new (SCSS) Output is perfectly valid CSS
  • 8. Various Whoops As in “Big Whoops”: Compression Variables Nesting File organization (partials & import) Code reuse (mixins & inheritance) Built-in functions & operators
  • 9. Install Sass Apps Command line http://sass-lang.com/install
  • 10. Command Line Installation [Windows] Install Ruby Windows: gem install sass [Mac] sudo gem install sass test it: sass -v Ruby Installer
  • 11. How Sass? setup watch to generate CSS from changes to SCSS carelessly bang out some code thoughtfully plan out organization of code and files upload generated CSS – just like it was written directly – to production site
  • 12. Setting Your Watch sass --watch themes/reveal/sass:themes/reveal --style compressed
  • 13. Variables & Functions $bright-red: #f00; $medium-red: #c00; $half-opaque-white: rgba(255,255,255,0.7); $default-link-color: opacify($medium-red, 0.6); $page-title-color: darken($medium-red, 10%); $link-color: complement($medium-red); $rightleft-padding: 2.5%; 10 $tall-topbottom-padding: 1%; 11 $narrow-topbottom-padding: 0.5%; 12 13 $site-width: 90%; 14 $main-content-width: 68%; 15 16 $sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding); 123456789
  • 14. Code Organization @import 'reset'; @import 'assistive'; @import 'variables'; @import 'bxslider'; @import 'mainnav'; @import 'interior'; @import 'full_flight_info'; @import 'sidebar'; @import 'structure'; 10 @import 'slicknav'; 11 @import 'responsive'; 123456789
  • 15. Mixins Sass (from Bourbon library) 1234 @import 'bourbon/bourbon'; section { @include linear-gradient(to top, red, orange); } Resulting CSS 12345 section { background-color: red; background-image: -webkit-linear-gradient(bottom, red, orange); background-image: linear-gradient(to top, red, orange); }
  • 16. Why Sass? Code organization: easier to maintain, team Performance: loads faster Tools: write better, faster, stronger code Sharing: get code from, give code to others
  • 17. Code Organization easier to team easier to maintain easier to give and receive example: ABQ airport sites
  • 18. Performance stitch together multiple CSS files – avoid limit on number of concurrent connections compression
  • 19. Power inheritance and mixins offer DRY ease-of-change: great power and great responsibility built-in functions a for loop!
  • 20. Sharing handing off, receiving code switchboarding of settings example: Foundation
  • 21. More Info & Questions http://sass-lang.com/