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
320
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
45
Website Considerations
suzettefranck
0
61
Website Weekend WP Basic Training by Karen McCamy
suzettefranck
0
3.2k
Intro to Sass for WordPress Theme Developers
suzettefranck
0
86
Ten Features of Jetpack You Can’t Live Without
suzettefranck
1
180
Introduction to Security and Backups
suzettefranck
0
180
Customizing the WordPress Admin Without Code
suzettefranck
1
810
"Into to PHP" Milwaukee WordCamp
suzettefranck
1
690
"Choosing a WordPress Host" - Hollywood WordPress
suzettefranck
1
440
Other Decks in Technology
See All in Technology
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
350
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
100
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
180
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
JavaにおけるNull非許容性
skrb
2
2.7k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
780
データモデルYANGの処理系を再発明した話
tjmtrhs
0
230
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Designing Experiences People Love
moore
140
23k
Thoughts on Productivity
jonyablonski
69
4.5k
Embracing the Ebb and Flow
colly
84
4.6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
The World Runs on Bad Software
bkeepers
PRO
67
11k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
How STYLIGHT went responsive
nonsquared
99
5.4k
Done Done
chrislema
182
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
530
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 suzette@mediatemple.net https://speakerdeck.com/suzettefranck @mt_Suzette