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
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
23
6.2k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
310
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
230
無理しない AI 活用サービス / #jazug
koudaiii
0
100
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A better future with KSS
kneath
238
17k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The World Runs on Bad Software
bkeepers
PRO
70
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Agile that works and the tools we love
rasmusluckow
329
21k
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