Tweet
Tweet

Slide 1

Slide 1 text

Introduction to Sass Veronica Erb | Jan 2014 | Code(Her) @verbistheword #DCWWCodeHer

Slide 2

Slide 2 text

Please download The zip file at github.com/veronicaerb/sass-intro ✤ And set up your compiler (whichever you’re using) so that it uses playground.scss create the playground.css file. Let one of us know if it’s not working for you! Or, ask your neighbor. She’s smart, too.

Slide 3

Slide 3 text

Welcome! @verbistheword #DCWWCodeHer

Slide 4

Slide 4 text

Two Guidelines Workshop: Let’s learn by doing. People: Let’s learn from each other. @verbistheword #DCWWCodeHer

Slide 5

Slide 5 text

Who has Sass running? Who’s next to you? @verbistheword #DCWWCodeHer

Slide 6

Slide 6 text

Veronica Erb Tony Pitale Matt Dingee Lynn Wallenstein Jason Garber @verbistheword @tpitale @humancompanion @LynnWallenstein @jgarber

Slide 7

Slide 7 text

Two Parts Part One: Basic Sass Concepts Break: 10 min Part Two: Open Dance @verbistheword #DCWWCodeHer

Slide 8

Slide 8 text

1 Sass Basics •Nesting, Variables, and Operators (15 min) •Preprocessors? (5 min) •Partials and Import (15 min) •Mixins and Extends & Placeholders (15 min) @verbistheword #DCWWCodeHer

Slide 9

Slide 9 text

selector { property: value; property: value; } declaration rule CSS Syntax As she ruled the land, the Chief Selector declared that the land’s properties must have value.

Slide 10

Slide 10 text

@verbistheword #DCWWCodeHer Nesting, Variables, and Operators 15 min

Slide 11

Slide 11 text

@verbistheword #DCWWCodeHer Nesting a { color: blue; &:hover { color: green; } } a { color: blue; } a:hover { color: green; } .css .scss

Slide 12

Slide 12 text

@verbistheword #DCWWCodeHer Nesting .feature { background-color: black; a { color: cyan; &:hover { color: lime; } } } .feature { background-color: black; } .feature a { color: cyan; } .feature a:hover { color: lime; } .css .scss

Slide 13

Slide 13 text

@verbistheword #DCWWCodeHer Variables $primary-color: blue; $secondary-color: green; a { color: $primary-color; &:hover { color: $secondary- color; } } .css a { color: blue; } a:hover { color: green; } .scss

Slide 14

Slide 14 text

@verbistheword #DCWWCodeHer Operators article { float: left; width: 600px / 960px * 100%; } article { float: left; width: 62.5%; } .css .scss

Slide 15

Slide 15 text

@verbistheword #DCWWCodeHer Try it selector { property: value; selector2 { property: value; } &:pseudo-selector { property: value; } } Nesting Variables $variable-name: value; ! selector { property: $variable-name; } Operators selector { property: x + y; property: x - y; property: x * y; property: x / y; } Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com

Slide 16

Slide 16 text

@verbistheword #DCWWCodeHer Preprocessor? 5 min

Slide 17

Slide 17 text

@verbistheword #DCWWCodeHer CSS

Slide 18

Slide 18 text

@verbistheword #DCWWCodeHer Sass

Slide 19

Slide 19 text

@verbistheword #DCWWCodeHer You are responsible Quality Quality Quality Quality

Slide 20

Slide 20 text

@verbistheword #DCWWCodeHer Partials and Import 15 min

Slide 21

Slide 21 text

@verbistheword #DCWWCodeHer Partials ! body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .css Look familiar?

Slide 22

Slide 22 text

@verbistheword #DCWWCodeHer Partials /* reset.css */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .css

Slide 23

Slide 23 text

@verbistheword #DCWWCodeHer Partials /* _reset.scss */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .scss

Slide 24

Slide 24 text

@verbistheword #DCWWCodeHer Import @import “reset”; a { color: blue; &:hover { color: green; } } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } a { color: blue; } a:hover { color: green; .css .scss

Slide 25

Slide 25 text

@verbistheword #DCWWCodeHer Try It Partial @import ‘filename’; Import ✤ Create a SCSS file that starts with an underscore, “_”, for example, “_filename.scss” ✤ Explore and discuss: How should the code be divided? Why? Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com

Slide 26

Slide 26 text

@verbistheword #DCWWCodeHer Mixins and 
 Extends & Placeholders 8 min

Slide 27

Slide 27 text

@verbistheword #DCWWCodeHer Mixins .feature { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .css Look familiar?

Slide 28

Slide 28 text

@verbistheword #DCWWCodeHer Mixins @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } ! .feature { @include border-radius(3px); } .scss

Slide 29

Slide 29 text

@verbistheword #DCWWCodeHer Mixins .feature { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .css

Slide 30

Slide 30 text

@verbistheword #DCWWCodeHer Extends + Placeholders .message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } ! .error { border-color: red; } ! .warning { border-color: yellow; } .css Look familiar?

Slide 31

Slide 31 text

@verbistheword #DCWWCodeHer Placeholders %message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } .success { border-color: green; } .css .scss

Slide 32

Slide 32 text

@verbistheword #DCWWCodeHer Extend %message { border: 1px solid gray; padding: 10px; color: #333; } ! .success { @extend %message; border-color: green; } ! .error { @extend %message; border-color: red; } ! .warning { @extend %message; border-color: yellow; } .scss

Slide 33

Slide 33 text

@verbistheword #DCWWCodeHer Extend .success, .error, .warning { border: 1px solid gray; padding: 10px; color: #333; } ! .success { border-color: green; } ! .error { border-color: red; } ! .warning { border-color: yellow; } .css

Slide 34

Slide 34 text

@verbistheword #DCWWCodeHer Try It @mixin name($value) { property: $value } selector { @include name(value); } Mixin %name { property: value; } Placeholder selector { @extend %name; property: value; } Extend Experiment in playground.scss, or try jsfiddle.net or tinkerbin.heroku.com

Slide 35

Slide 35 text

@verbistheword #DCWWCodeHer Variables 
 and
 Partials & Import 
 and 
 Extends & Placeholders 
 and
 Mixins 8 min Big Picture Edition

Slide 36

Slide 36 text

Partial & Import Variable Extend $variable = value %placeholder { property: value; } _partial.scss $variable $variable $variable @extend %placeholder @import partial Files Values .scss @extend %placeholder Rules

Slide 37

Slide 37 text

Partial & Import Variable Extend $variable $variable $variable @import partial Files Values Rules .css .class-that-extended, 
 .another-one-that-did { }

Slide 38

Slide 38 text

%placeholder { property: value; } @extend %placeholder; @extend %placeholder; .scss @mixin mixin($value) { property: $value; } @include mixin(10px); @include mixin(12px); Extend Mixin Rules Rules + Values (Used most often) (Good for vendor prefixes)

Slide 39

Slide 39 text

.css .class-that-extended, 
 .another-one-that-did { } .class-with-mixin { property: 10px; } .class-also-with-mixin { property: 12px; } Extend Mixin Rules Rules + Values

Slide 40

Slide 40 text

The names of 
 Variables and Partials & Import and Extends & Placeholders and Mixins will make them real— and more maintainable. @verbistheword #DCWWCodeHer

Slide 41

Slide 41 text

Break! 10 min @verbistheword #DCWWCodeHer

Slide 42

Slide 42 text

2 Open Dance •Explore (40min) •What Sticks (10min) •Wrap-Up (5min) @verbistheword #DCWWCodeHer

Slide 43

Slide 43 text

@verbistheword #DCWWCodeHer Explore 40 min

Slide 44

Slide 44 text

Sassthusiast ✤ Review any of the features from the first hour ✤ Create a layout system using Operators and Variables ✤ Shift your site’s CSS to Sass Sass Master ✤ Install Compass and use its mixins to spruce up the demo site ✤ Install Compass and create a sprite to spruce up the demo site ✤ Install Susy (after installing Compass) and play with responsive grids @verbistheword #DCWWCodeHer

Slide 45

Slide 45 text

@verbistheword #DCWWCodeHer What Sticks? 10 min

Slide 46

Slide 46 text

@verbistheword #DCWWCodeHer Wrap-Up 5 min

Slide 47

Slide 47 text

@verbistheword #DCWWCodeHer Syntax /* SCSS, aka Sassy CSS. Newer. */ ! a { color: blue; &:hover { color: green; } } /* indented syntax, aka Sass. Older. */ ! a color: blue; &:hover color: green; .css .scss

Slide 48

Slide 48 text

Sassy Know-How sass-lang.com/guide ✤ The basics we covered today thesassway.com ✤ Beginner, intermediate, and advanced topics compass-style.org ✤ A Sass pattern library susy.oddbird.net ✤ A Sass responsive grid system @verbistheword #DCWWCodeHer

Slide 49

Slide 49 text

An Event Tomorrow! sassydc.github.io ✤ A monthly meetup in Washington, DC to discuss the latest in Sass, Compass, and Front End Dev ✤ Perspectives on File Structure
 15 Jan 2014 at 6:30pm
 Canvas Coworking Space
 1203 19th St. NW, 3rd Floor
 Washington, DC 20036 ✤ sassydc.eventbrite.com @verbistheword #DCWWCodeHer

Slide 50

Slide 50 text

Veronica Erb Tony Pitale Matt Dingee Lynn Wallenstein Jason Garber @verbistheword @tpitale @humancompanion @LynnWallenstein @jgarber

Slide 51

Slide 51 text

Thank you! veronicaerb.com ! Wanna hang out with Veronica more often? j.mp/verbmail @verbistheword #DCWWCodeHer