Tweet
Tweet

Slide 1

Slide 1 text

Getting Sassy Suzette Franck 2014 Atlanta WordCamp Atlanta, GA Saturday, March 15th, 2014 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple

Slide 2

Slide 2 text

Getting Sassy Suzette Franck 2014 Atlanta WordCamp Atlanta, GA Saturday, March 15th, 2014 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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, 8 states, 2 countries

Slide 9

Slide 9 text

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, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com

Slide 10

Slide 10 text

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, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com

Slide 11

Slide 11 text

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, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com ★Blogs at: suzettefranck.com

Slide 12

Slide 12 text

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, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck

Slide 13

Slide 13 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple My Silly Assumptions

Slide 14

Slide 14 text

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 My Silly Assumptions

Slide 15

Slide 15 text

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 My Silly Assumptions

Slide 16

Slide 16 text

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 My Silly Assumptions

Slide 17

Slide 17 text

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 My Silly Assumptions

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple My Goal...

Slide 20

Slide 20 text

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...

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple sass-lang.com

Slide 24

Slide 24 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass Basics

Slide 25

Slide 25 text

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 Basics

Slide 26

Slide 26 text

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 Sass Basics

Slide 27

Slide 27 text

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 Sass Basics

Slide 28

Slide 28 text

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 Sass Basics

Slide 29

Slide 29 text

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 Sass Basics

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sassmeister.com

Slide 33

Slide 33 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass FTW, but Why?

Slide 34

Slide 34 text

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 Sass FTW, but Why?

Slide 35

Slide 35 text

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 Sass FTW, but Why?

Slide 36

Slide 36 text

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 Sass FTW, but Why?

Slide 37

Slide 37 text

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 Sass FTW, but Why?

Slide 38

Slide 38 text

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. Sass FTW, but Why?

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Efficient? How?

Slide 41

Slide 41 text

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! Efficient? How?

Slide 42

Slide 42 text

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 Efficient? How?

Slide 43

Slide 43 text

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 Efficient? How?

Slide 44

Slide 44 text

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 Efficient? How?

Slide 45

Slide 45 text

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 Efficient? How?

Slide 46

Slide 46 text

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?

Slide 47

Slide 47 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Output Styles

Slide 48

Slide 48 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) Output Styles

Slide 49

Slide 49 text

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) Output Styles

Slide 50

Slide 50 text

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) Output Styles

Slide 51

Slide 51 text

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 Styles

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Example config.rb

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

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?

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Comments in Sass `

Slide 58

Slide 58 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @import

Slide 59

Slide 59 text

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 @import

Slide 60

Slide 60 text

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 @import

Slide 61

Slide 61 text

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 @import

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Nesting All The Things

Slide 66

Slide 66 text

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 Nesting All The Things

Slide 67

Slide 67 text

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 Nesting All The Things

Slide 68

Slide 68 text

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 Nesting All The Things

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Nesting Selectors .SCSS .CSS

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple $variables

Slide 73

Slide 73 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! $variables

Slide 74

Slide 74 text

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 $variables

Slide 75

Slide 75 text

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 $variables

Slide 76

Slide 76 text

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 $variables

Slide 77

Slide 77 text

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 $variables

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple $variables .SCSS .CSS

Slide 80

Slide 80 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @mixin

Slide 81

Slide 81 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! @mixin

Slide 82

Slide 82 text

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 @mixin

Slide 83

Slide 83 text

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 @mixin

Slide 84

Slide 84 text

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 @mixin

Slide 85

Slide 85 text

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 @mixin

Slide 86

Slide 86 text

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 @mixin

Slide 87

Slide 87 text

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 @mixin

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @mixin .SCSS .CSS

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Color Functions

Slide 92

Slide 92 text

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 Color Functions

Slide 93

Slide 93 text

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 Color Functions

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple http://sassme.arc90.com/

Slide 97

Slide 97 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Other Resources

Slide 98

Slide 98 text

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 Other Resources

Slide 99

Slide 99 text

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 Other Resources

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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?

Slide 102

Slide 102 text

Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Did you learn at least one thing you can put into practice right away?

Slide 103

Slide 103 text

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?

Slide 104

Slide 104 text

Thank you for being here!

Slide 105

Slide 105 text

Thank you for being here! Follow Me on Twitter! Suzette Franck [email protected] https://speakerdeck.com/suzettefranck @mt_Suzette