Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introduction to Sass
Suzette Franck
May 17, 2014
Technology
0
210
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
11
Website Considerations
suzettefranck
0
35
Website Weekend WP Basic Training by Karen McCamy
suzettefranck
0
3.1k
Intro to Sass for WordPress Theme Developers
suzettefranck
0
60
Ten Features of Jetpack You Can’t Live Without
suzettefranck
1
140
Introduction to Security and Backups
suzettefranck
0
95
Customizing the WordPress Admin Without Code
suzettefranck
1
780
"Into to PHP" Milwaukee WordCamp
suzettefranck
1
640
"Choosing a WordPress Host" - Hollywood WordPress
suzettefranck
1
400
Other Decks in Technology
See All in Technology
Whats new in Android Media?
myolwin00
2
120
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
140
KubeCon Recap -Platform migration at Scale-
inductor
0
130
Oracle Content Management サービス概要 (2022年5月版)
oracle4engineer
PRO
0
130
NestJS + Prisma2 で歩む RLS の世界
ynaka81
1
110
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
1.1k
Server-side Kotlin in LINE Messaging API
line_developers
PRO
0
200
プロダクトの理想と現実はなぜ乖離しがち?プロダクト作りに潜む問題を考える
suzukentaro
0
270
Scrum Fest Niigata 2022 開発エンジニアに聞いてみよう!
moritamasami
1
680
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
220
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
870
LINEポイントクラブにおける PerlからKotlinへの移行を振り返る / The migration from Perl to Kotlin at LINE Point Club
line_developers
PRO
0
190
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
506
37k
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
4 Signs Your Business is Dying
shpigford
169
20k
In The Pink: A Labor of Love
frogandcode
130
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Clear Off the Table
cherdarchuk
79
280k
Become a Pro
speakerdeck
PRO
3
790
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