Tweet
Tweet

Slide 1

Slide 1 text

#wcgr Let’s get SASSy

Slide 2

Slide 2 text

#wcgr #wcpvd I’m Brad Parbs. Created Wolf, hook_s & wpWizard Core Contributor in 3.5 & 3.6 Run Snow Day Group, (snowday.io) ♥ WordPress, Startups, and Code Plugin and Theme author/developer @BradParbs brad.parbs.me

Slide 3

Slide 3 text

#wcgr What is SASS? “Sass is a meta-language on top of CSS ... with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” sass-lang.org

Slide 4

Slide 4 text

#wcgr What is SASS? Write less, do more.

Slide 5

Slide 5 text

#wcgr What is SASS? SASS is awesome.

Slide 6

Slide 6 text

#wcgr Why SASS over LESS? Compass - “drop-in” bits of SASS @extend() - allows for cleaner HTML Easily Embedding Media Queries #wcmke

Slide 7

Slide 7 text

#wcgr Installation Prepros #wcmke

Slide 8

Slide 8 text

#wcgr Installation Prepros #wcmke

Slide 9

Slide 9 text

#wcgr Now we write some SASS... #wcmke

Slide 10

Slide 10 text

#wcgr And it becomes CSS! #wcmke

Slide 11

Slide 11 text

#wcgr Any Questions?

Slide 12

Slide 12 text

#wcgr Let’s get SASSy

Slide 13

Slide 13 text

#wcgr Two Flavors .scss .sass #wcgr

Slide 14

Slide 14 text

#wcgr Two Flavors .scss .sass More similar to CSS Easier to jump into from CSS Probably where you want to start Less keystrokes Cleaner files #wcgr

Slide 15

Slide 15 text

#wcgr Nesting #wcgr

Slide 16

Slide 16 text

#wcgr Nesting Nesting #wcgr

Slide 17

Slide 17 text

#wcgr Parent Selector Reference #wcgr

Slide 18

Slide 18 text

#wcgr Parent Selector Reference #wcgr

Slide 19

Slide 19 text

#wcgr Selector Bubble Up Perfect for using Media Queries to build responsively. #wcgr

Slide 20

Slide 20 text

#wcgr Partials / File Structure http://b.parbs.me/PP2n http://b.parbs.me/POcZ #wcgr

Slide 21

Slide 21 text

#wcgr Variables #wcgr

Slide 22

Slide 22 text

#wcgr @extend() #wcmke #wcgr

Slide 23

Slide 23 text

#wcgr @extend() #wcgr

Slide 24

Slide 24 text

#wcgr Silent @extend #wcgr

Slide 25

Slide 25 text

#wcgr Mixins

Slide 26

Slide 26 text

#wcgr Mixins

Slide 27

Slide 27 text

#wcgr Mixins with Arguments w/

Slide 28

Slide 28 text

#wcgr Mixins with Arguments w/

Slide 29

Slide 29 text

#wcgr Mixins with Default Arguments

Slide 30

Slide 30 text

#wcgr Mixins

Slide 31

Slide 31 text

#wcgr

Slide 32

Slide 32 text

#wcgr http://bourbon.io/

Slide 33

Slide 33 text

#wcgr Mixins Appearance Background Clip Background Origin Background Size Border Radius Box Box Shadow Box Sizing CSS Regions CSS3 Pie Columns Filter Font Face

Slide 34

Slide 34 text

#wcgr Mixins Reset Utilities Links Lists Text Vertical Rhythm Color General Print Sprites Tables http://compass-style.org

Slide 35

Slide 35 text

#wcgr Mixins

Slide 36

Slide 36 text

#wcgr gif break!

Slide 37

Slide 37 text

#wcgr Operations

Slide 38

Slide 38 text

#wcgr Operations within functions

Slide 39

Slide 39 text

#wcgr Color Functions

Slide 40

Slide 40 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH

Slide 41

Slide 41 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E;

Slide 42

Slide 42 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% );

Slide 43

Slide 43 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% );

Slide 44

Slide 44 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% ); saturate( $base-color, 20% ); desaturate( $base-color, 20% );

Slide 45

Slide 45 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% ); saturate( $base-color, 20% ); desaturate( $base-color, 20% );

Slide 46

Slide 46 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% ); saturate( $base-color, 20% ); desaturate( $base-color, 20% ); adjust-hue( $base-color, 20% );

Slide 47

Slide 47 text

#wcgr Color Functions examples from: http://b.parbs.me/PSRH $base-color: #AD141E; darken( $base-color, 10% ); lighten( $base-color, 10% ); saturate( $base-color, 20% ); desaturate( $base-color, 20% ); adjust-hue( $base-color, 20% );

Slide 48

Slide 48 text

#wcgr Color Functions

Slide 49

Slide 49 text

#wcgr Color Functions

Slide 50

Slide 50 text

#wcgr Color Functions

Slide 51

Slide 51 text

#wcgr Color Operations http://sassme.arc90.com/

Slide 52

Slide 52 text

#wcgr Operations with Directive

Slide 53

Slide 53 text

#wcgr Operations - Range of Numbers #wcgr

Slide 54

Slide 54 text

#wcgr Operations - Range of Numbers with Silent placeholders #wcgr

Slide 55

Slide 55 text

#wcgr Operations - List of Values #wcgr

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

#wcgr config.rb #wcgr

Slide 58

Slide 58 text

#wcgr config.rb #wcgr

Slide 59

Slide 59 text

#wcgr Let’s install Twitter Bootstrap Without SASS: 1.Download zip file. 2. Copy+Paste into stylesheet or: @import another CSS file or: another CSS file 3.Redo all of this when there’s an update. 4.Ugh this sucks, I’ll just use BootstrapWP. #wcgr

Slide 60

Slide 60 text

#wcgr Let’s install Twitter Bootstrap With SASS: 1.$ gem install compass-bootstrap (only have to ever do this once) 2. Add require “compass- bootstrap” to config.rb. #wcgr

Slide 61

Slide 61 text

#wcgr Let’s install Twitter Bootstrap https://github.com/hecbuma/compass-bootstrap #wcgr

Slide 62

Slide 62 text

#wcgr config.rb #wcgr

Slide 63

Slide 63 text

#wcgr config.rb #wcgr

Slide 64

Slide 64 text

#wcgr Processing Modes #wcgr

Slide 65

Slide 65 text

#wcgr Processing Modes :expanded #wcgr

Slide 66

Slide 66 text

#wcgr Processing Modes :nested :expanded #wcgr

Slide 67

Slide 67 text

#wcgr Processing Modes :nested :expanded :compact #wcgr

Slide 68

Slide 68 text

#wcgr Processing Modes :nested :expanded :compact :compressed #wcgr

Slide 69

Slide 69 text

#wcgr config.rb #wcgr

Slide 70

Slide 70 text

#wcgr Building a WP Theme • We want only one stylesheet • Our SASS folder should live independently • config.rb in the root, so we can use Codekit to optimize images & JS https://github.com/bradp/Wolf #wcgr

Slide 71

Slide 71 text

#wcgr Building a WP Theme #wcgr

Slide 72

Slide 72 text

#wcgr Tools http://sassmeister.com/ http://codepen.io/ http://thesassway.com/ #wcgr

Slide 73

Slide 73 text

#wcgr Resources http://alistapart.com/article/getting-started-with-sass http://css-tricks.com/redesigning-with-sass/ https://speakerdeck.com/anotheruiguy/clean-out-your-sass-junk-drawer https://speakerdeck.com/irishstu/an-introduction-to-sassy-css http://sass-lang.com/ #wcgr

Slide 74

Slide 74 text

#wcgr I’m Brad Parbs. @BradParbs brad.parbs.me http://b.parbs.me/ Slides: #wcgr

Slide 75

Slide 75 text

#wcgr Questions?

Slide 76

Slide 76 text

#wcgr