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
350
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
55
Website Considerations
suzettefranck
0
75
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
820
"Into to PHP" Milwaukee WordCamp
suzettefranck
1
710
"Choosing a WordPress Host" - Hollywood WordPress
suzettefranck
1
460
Other Decks in Technology
See All in Technology
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
250
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.5k
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
250
トヨタ生産方式(TPS)入門
recruitengineers
PRO
5
1.4k
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
2
310
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
10
680
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
120
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
410
進捗
ydah
2
220
JavaScript 研修
recruitengineers
PRO
6
1.3k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Agile that works and the tools we love
rasmusluckow
330
21k
How to Think Like a Performance Engineer
csswizardry
26
1.8k
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Designing for Performance
lara
610
69k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Code Reviewing Like a Champion
maltzj
525
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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