Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Sass
Search
Suzette Franck
May 17, 2014
Technology
0
340
Introduction to Sass
If you know CSS, then Sass is the next step to create beautiful themes that are coded well.
Suzette Franck
May 17, 2014
Tweet
Share
More Decks by Suzette Franck
See All by Suzette Franck
Accessibility For Everyone
suzettefranck
0
54
Website Considerations
suzettefranck
0
74
Website Weekend WP Basic Training by Karen McCamy
suzettefranck
0
3.2k
Intro to Sass for WordPress Theme Developers
suzettefranck
0
94
Ten Features of Jetpack You Can’t Live Without
suzettefranck
1
180
Introduction to Security and Backups
suzettefranck
0
190
Customizing the WordPress Admin Without Code
suzettefranck
1
810
"Into to PHP" Milwaukee WordCamp
suzettefranck
1
700
"Choosing a WordPress Host" - Hollywood WordPress
suzettefranck
1
460
Other Decks in Technology
See All in Technology
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
160
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.6k
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
190
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.9k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
330
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Code Reviewing Like a Champion
maltzj
524
40k
Code Review Best Practice
trishagee
69
18k
Designing Experiences People Love
moore
142
24k
Practical Orchestrator
shlominoach
188
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
For a Future-Friendly Web
brad_frost
179
9.8k
Optimizing for Happiness
mojombo
379
70k
Making Projects Easy
brettharned
116
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
Introduction to Sass Suzette Franck Charleston WordCamp Saturday, May 17th,
2014 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps 2014: 4 WordCamps ★WordPress Podcast: WPunicornproject.com ★Reg. Contributor: WPwatercooler.com ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS ★You’re interested in theme development ★You think WordPress is pretty awesome ★You know how to use Google ★You’re probably pretty smart already My Silly Assumptions
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Teach you at least one thing you can put into practice right away! My Goal...
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass For Web Designers by Dan Cederholm
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What is Sass? Syntactically Awesome Style Sheets
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple sass-lang.com
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application ★Gems need to be installed once on your computer ★World of pre-made additions (mixins) and other resources ★Two flavors: .SCSS (Sassy CSS) & .SASS ★.SCSS most closely resembles .CSS in syntax Sass Basics
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple thesassway.com/beginner/ getting-started-with-sass-and-compass @adamstac by Adam Stacoviak
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sassmeister.com
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values ★Calculates values: colors, lengths ★Bubbles up: Media Queries can be written within their element ★Supports Advanced Logic/if..then, while, else, etc. ★Adopted by WordPress Core team & GPL Compatible* Sass FTW, but Why? * Reference: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import ★Helps you write more advanced code faster ★Cleaner, easier to read once you are familiar ★Using variable, make site-wide changes in fewer places ★4 output styles can be chosen depending on goals Efficient? How?
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) ★Expanded (closest to hand-crafted CSS) ★Compact (saves space) ★Compressed (saves most space, minified) ★Output style can be specified in your config.rb Output Styles
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Example config.rb
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Are Sass Files Hard to Create? Rename your .css file with an .scss extension!
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ALRIGHTY... Ready For Some .SCSS Code?
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Wolf Starter Theme by Brad Parbs https://github.com/bradp/Wolf
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Comments in Sass `
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials ★Re-use your favorite mixins on all of your projects ★Compiled into one .css file at end ★Fewer HTTP requests - performance! ★Import others’ mixins and use them @import
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @import Note: .scss is appended to end of filename
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated selectors are nested inside curly braces ★& is a placeholder for the parent selector ★Namespaces can also be nested, ie font, background ★Compiled CSS will always be more verbose Nesting All The Things
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Nesting Selectors .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated namespaces are nested inside the curly braces ★Use with font, background, etc. Nesting Namespaces .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value ★Call by $name ★Ability to change variables in one place ★Useful for defining hex colors / creating a style guide ★Don’t forget 140 color names in CSS3! (Google it) $variables
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple $variables .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include ★Useful for CSS3 Vendor Prefixes ★Powerful with arguments ★Many pre-made mixins you can use in community ★Compass, Bourbon, GitHub, Your Own Library @mixin
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @mixin .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Mixins with Arguments .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★darken, lighten, adjust-hue, saturate, desaturate ★Full list at: http://sass-lang.com/documentation/Sass/Script/ Functions.html ★Hexidecimal # is calculated & output in final CSS Color Functions
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass Color Functions .SCSS .CSS
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple http://sassme.arc90.com/
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Brad Parbs Sass talks on WordPress.tv ★Chris Coyier’s website css-tricks.com ★mashable.com/2013/06/11/sass-compass-tools Other Resources
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple SO... Who is going to experiment with Sass?
Media Temple // 8520 National Blvd. Culver City, CA 90232
/ 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Do you have any questions?
Thank you for being here! Follow Me on Twitter! Suzette
Franck
[email protected]
https://speakerdeck.com/suzettefranck @mt_Suzette