An Introduction to Sassy CSS

Slide 1

Slide 1 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 An Introduction to Sassy CSS Stewart Curry

Slide 2

Slide 2 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 Who is This Guy? Web Designer for 15 years or so Table-based layouts & spacer gifs CSS changed all that SCSS is CSS only better woop.ie - iteration, modules, themes, templates

Slide 3

Slide 3 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 past simple

Slide 4

Slide 4 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 5

Slide 5 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 now complicated

Slide 6

Slide 6 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 7

Slide 7 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 design everywhere

Slide 8

Slide 8 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012       

Slide 9

Slide 9 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 SASS MAKES CSS FUN AGAIN www.sass-lang.com Basically, CSS made ﬂexible & awesome by adding in cool features.

Slide 10

Slide 10 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 TOPICS • What’s Sass/SCSS? • Installing Sass • Variables • Nesting • Mixins • Media Queries • Partials • Inheritance • Gotchas • Links

Slide 11

Slide 11 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 There Will be Code

Slide 12

Slide 12 text

Slide 13

Slide 13 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ Sass Style with attitude Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. www.sass-lang.com

Slide 14

Slide 14 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 it looks like CSS $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

Slide 15

Slide 15 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 it looks like CSS but • it’s neater • it’s faster to write • it allows for more experimentation • it’s more ﬂexible • it’s more manageable • it’s got variables!

Slide 16

Slide 16 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 so you can • experiment more • make global changes quickly • make reusable modules • use frameworks more eﬀectively • handle RWD neatly • have less cluttered code

Slide 17

Slide 17 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow css images scripts index.html

Slide 18

Slide 18 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow css images scripts index.html sass

Slide 19

Slide 19 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow css images scripts index.html sass style.scss

Slide 20

Slide 20 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow style.scss ⚙ processor style.css

Slide 21

Slide 21 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow css images scripts index.html sass style.scss style.css

Slide 22

Slide 22 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 all you do is... • make a .scss file • write to it, just like normal CSS • translate it to a CSS file/folder: • sass --watch style.scss:style.css • sass --watch stylesheets/ ↵ sass:stylesheets/compiled • and any changes you make to your SCSS file(s) will be complied to your CSS file(s).

Slide 23

Slide 23 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 Y U NO USE LESS.JS?

Slide 24

Slide 24 text

Slide 25

Slide 25 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 26

Slide 26 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 27

Slide 27 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 Install Ruby rubyinstaller.org $ sudo gem install sass $ sass --watch style.scss:style.css

Slide 28

Slide 28 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 http://incident57.com/codekit/

Slide 29

Slide 29 text

Slide 30

Slide 30 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ $variables variables allow you to use the same value in multiple places, as well as perform basic maths and functions.

Slide 31

Slide 31 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why variables rock Change one variable and you change it everywhere. Save hours of search & replacing. Experiment with small changes in margins & gutters. Reskin with diﬀerent colours...

Slide 32

Slide 32 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 $variables • begin with a dollar sign $ • assign a value with a colon separator : • end with semi-colon ; $red : #ff0000; $font : "Open Sans", Arial, Sans-Serif; $margin : 16px; $column : 40px; $type : 1em;

Slide 33

Slide 33 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 $variables • use instead of a value h1 { color: $primarycolor; font-family: $mainfont; font-size: $basetypesize; margin: 0 0 $margin 0; } SCSS h1 { color: red; font-family: "Open Sans", Arial, Sans-Serif; font-size: 1em; margin: 0 0 16px 0; } CSS $primarycolor : red $mainfont : “Open Sans... $basetypesize : 1em $margin : 16px

Slide 34

Slide 34 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 operations • maths: + - / * • color: darken, lighten, saturation, opacity • http://sass-lang.com/docs/yardoc/Sass/ Script/Functions.html

Slide 35

Slide 35 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 operations .island { background: darken($primarycolor,10%); width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25; } SCSS .island { background: #cc0000; width: 160px; margin: 32px 8px 36px 16px; padding: 4px; } CSS $primarycolor : red $column : 40px $margin : 16px

Slide 36

Slide 36 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 escaping • wrap with #{ } • useful for paths p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont; } SCSS p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif; } CSS $basetypesize : 1em

Slide 37

Slide 37 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 negatives • minus symbols • -64px -32px 0 16px • top: -96px; right , left are 0; bottom is 16px .moveup { margin:-$margin*4 -$margin*2 0 $margin; } SCSS .moveup { margin: -96px 0 16px; } CSS $margin : 16px

Slide 38

Slide 38 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 negatives • wrap in brackets • (-$variable*value) .moveup { margin:(-$margin*4) (-$margin*2) 0 $margin; } SCSS .moveup { margin: -64px -32px 0 16px; } CSS $margin : 16px

Slide 39

Slide 39 text

Slide 40

Slide 40 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ nesting Sass avoids repetition by nesting selectors within one another. The same thing works with properties. www.sass-lang.com

Slide 41

Slide 41 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why nesting rocks Write a hell of a lot less CSS. Avoid repetion. Use indentation to quickly scan and see relationships. Use ampersands for awesomeness.

Slide 42

Slide 42 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 write html as normal

Home
About
Services
Contact Us

HTML

Slide 43

Slide 43 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 nest & indent nav { font-family: $mainfont; ul { margin: 0; padding: 0; li { list-style: none; a { background: #222; color: #fff; display: block; float: left; padding: $margin $margin*1.5; text-decoration: none; } } } } SCSS $mainfont : “Open Sans... $margin : 16px

Slide 44

Slide 44 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 nest & indent nav { font-family: "Open Sans", Arial, Sans-Serif; } nav ul { margin: 0; padding: 0; } nav ul li { list-style: none; } nav ul li a { background: #222; border-right: 1px solid #666; color: #fff; display: block; float: left; padding: 16px 24px; text-decoration: none; } CSS $mainfont : “Open Sans... $margin : 16px

Slide 45

Slide 45 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 selectors em { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; } } SCSS em { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps; } CSS

Slide 46

Slide 46 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 & ampersand

Slide 47

Slide 47 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 & ampersand • pulls the parent selector into the & #fancybox { li a.fancy { &:link { color: $primarycolor; } &:visited { color: darken($primarycolor,20%); } &:hover { color: lighten($primarycolor,10%); } } } SCSS #fancybox li a.fancy:link { color: #993333; } #fancybox li a.fancy:visited { color: #4d1919; } #fancybox li a.fancy:hover { color: #bf4040; } CSS $primarycolor : #993333

Slide 48

Slide 48 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • prepends before parent selector #fancybox { li a.fancy { &:link { color: $primarycolor; } &:hover { color: lighten($primarycolor,10%); } body#checkout & { border:1px solid $primarycolor; } } } SCSS #fancybox li a.fancy:link { color: #993333; } #fancybox li a.fancy:hover { color: #bf4040; } body#checkout #fancybox li a.fancy { border: 1px solid #993333; } CSS $primarycolor : #993333

Slide 49

Slide 49 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • use with HTML body classes #browserwars { border: 1px solid red; .ie8 &, .ie9 & { border: 1px solid blue; } .ie10 & { border: 1px solid green; } } SCSS

Slide 50

Slide 50 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • use with HTML body classes #browserwars { border: 1px solid red; } .ie8 #browserwars, .ie9 #browserwars { border: 1px solid blue; } .ie10 #browserwars { border: 1px solid green; } CSS

Slide 51

Slide 51 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • use with HTML body classes $size :16px; h1 { font: { family: Arial, sans-serif; size: $size; } .wf-active & { font: { family: "proxima-nova-extra-condensed", Arial, sans-serif; size: $size*1.5; } } } SCSS $size : 16px

Slide 52

Slide 52 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • use with HTML body classes h1 { font-family: Arial, sans-serif; font-size: 16px; } .wf-active h1 { font-family: "proxima-nova-extra-condensed", Arial, sans-serif; font-size: 24px; } CSS $size : 16px

Slide 53

Slide 53 text

Slide 54

Slide 54 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ @mixins mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments. www.sass-lang.com

Slide 55

Slide 55 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why mixins rock Reduce massive chunks of CSS into reusable includes that you can use over and over again.

Slide 56

Slide 56 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 http://compass-style.org/

Slide 57

Slide 57 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @mixin • begin with @mixin • give it a name • add your $variable(s) • give (an) optional default value(s) @mixin roundcorner ($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; }

Slide 58

Slide 58 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @mixin • call it with @include .fancybox { width: 100px; @include roundcorner(10); } SCSS .fancybox { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } CSS

Slide 59

Slide 59 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 image replace @mixin hidetext { text-indent: 100%; white-space: nowrap; overflow: hidden; } .logo { background: url(images/logo.png) no-repeat; @include hidetext; width: 200px; height: 80px; }

Slide 60

Slide 60 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 boxshadow @mixin boxshadow ($horz, $vert, $blur, $spread, $color) { -webkit-box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color; -moz-box-shadow: #{$horz} px #{$vert}px #{$blur}px #{$spread}px $color; box-shadow: #{$horz}px #{$vert}px #{$blur}px #{$spread}px $color; } @include boxshadow (2,2,2,0,rgba(0,0,0,0.5));

Slide 61

Slide 61 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 transitions @mixin transanim ($time) { -webkit-transition: all #{$time}s ease-in-out; -moz-transition: all #{$time} s ease-in-out; -o-transition: all #{$time}s ease-in-out; -ms-transition: all #{$time}s ease-in-out; transition: all all #{$time}s ease-in-out; } * { @include transanim(0.5); }

Slide 62

Slide 62 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 type @mixin type ($size, $lineheight, $marginbottom: 1 1.5 1) { font-size: $grid*$size; font-size: $grid*$size / 16px + rem; line-height: $grid*$lineheight; line-height: $grid*$lineheight / 16px + rem; margin:0 0 $grid*$marginbottom 0; } h1 { @include type (1.75, 2, 1); } $grid : 20px $lineheight : 1em

Slide 63

Slide 63 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 type h1 { font-size: 35px; font-size: 2.188rem; line-height: 40px; line-height: 2.5rem; margin: 0 0 20px 0; } CSS $grid : 20px $lineheight : 1em

Slide 64

Slide 64 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @each $social: twitter facebook linkedin; @mixin social-icons { @each $icon in $social { .social-#{$icon} { background: url("images/#{$icon}.png") no-repeat; } } } .social { @include social-icons; } SCSS

Slide 65

Slide 65 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 it’s a loop! .social .social-twitter { background: url("images/twitter.png") no-repeat; } .social .social-facebook { background: url("images/facebook.png") no-repeat; } .social .social-linkedin { background: url("images/linkedin.png") no-repeat; } CSS

Slide 66

Slide 66 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 retina @mixin bgretina ($source, $format ) { background: { image: url("#{$source}.#{$format}"); size: cover; repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { background: { image: url("#{$source}@2x.#{$format}"); } } } #responsivetest { width: 400px; height: 400px; @include bgretina(bgimage,png) } SCSS

Slide 67

Slide 67 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 retina #responsivetest { width: 400px; height: 400px; background-image: url("bgimage.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 2) { #responsivetest { background-image: url("[email protected]"); } } CSS

Slide 68

Slide 68 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 ampersand & • make it a mixin to reuse @mixin webfonts ($fallback, $shinytype, $size) { font: { family: #{$fallback}; size: $size; } .wf-active & { font: { family: "#{$shinytype}", #{$fallback}; size: $size*1.5; } } } h1 { @include webfonts("Arial, sans-serif", "proxima-nova-extra-condensed", 16px); } SCSS

Slide 69

Slide 69 text

Slide 70

Slide 70 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ @media @media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. www.sass-lang.com

Slide 71

Slide 71 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why media queries rock Make responsive layouts. Associate media queries more closley with the element you are changeing.

Slide 72

Slide 72 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media • begin with @media • write media queries as normal • if it appears within a rule, it will ‘bubble up’ and put the selectors within the rule. • media queries can be nested • combined with the and rule

Slide 73

Slide 73 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media .sidebar { float: right; width: 300px; @media screen and (max-width: 480px) { float: none; width: 100%; } } SCSS .sidebar { float: right; width: 300px; } @media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; } } CSS

Slide 74

Slide 74 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 #logo #menu #content #leftnav #footer 1 2 3 4 5

Slide 75

Slide 75 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 #logo #menu #content #leftnav #footer 1 2 3 4 5

Slide 76

Slide 76 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media @mixin boxit ($dir) { display:box; display:-moz-box; display:-webkit-box; box-orient:$dir; -moz-box-orient:$dir; -webkit-box-orient:$dir; } @mixin boxnum($num: 1) { box-ordinal-group: #{$num}; -moz-box-ordinal-group: #{$num}; -webkit-box-ordinal-group: #{$num}; } SCSS

Slide 77

Slide 77 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media @media screen and (max-width: 480px) { #wrapper { width: 100%; @include boxit(vertical); #logo { @include boxnum(2); } #menu { @include boxnum(1); } #content { @include boxnum(3); } #leftnav { @include boxnum(4); } #footer { @include boxnum(5); } } } SCSS

Slide 78

Slide 78 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 #logo #menu #content #leftnav #footer 1 2 3 4 5 1 2 3 4 5

Slide 79

Slide 79 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 3.2 coming soon

Slide 80

Slide 80 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media • variables in queries • Sass 3.2 alpha • other cool stuﬀ You can’t use this yet - watch https://github.com/nex3/sass/

Slide 81

Slide 81 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @media You can’t use this yet - watch https://github.com/nex3/sass/ @mixin respond-to($media) { @if $media == handhelds { @media only screen and (max-width: 320px) { @content; } } @else if $media == medium-screens { @media only screen and (min-width: 321px) and (max-width: 1024px) { @content; } } @else if $media == wide-screens { @media only screen and (min-width: 1024px) { @content; } } } .profile-pic { float: left; width: 250px; @include respond-to(handhelds) { width: 100% ;} @include respond-to(medium-screens) { width: 125px; } @include respond-to(wide-screens) { float: none; } } SCSS http://thesassway.com/intermediate/responsive-web-design-part-2#the_future_of_media_queries_in_sass

Slide 82

Slide 82 text

Slide 83

Slide 83 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ _partials partials are snippets of scss that are saved into ﬁles meant to be imported. They begin with an underscore and don’t get compiled.

Slide 84

Slide 84 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why partials rock Include ﬁles for CSS. Make your ﬁles more managable by breaking them into discreet external modules.

Slide 85

Slide 85 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 _partials • ﬁlename starts with an underscore • e.g. “_grid.scss” • import it into your .scss ﬁle • @import "grid"; • save on HTTP requests • better structure

Slide 86

Slide 86 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 workﬂow _reset.scss _grid.scss _type.scss style.scss ⚙ processor style.css

Slide 87

Slide 87 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 88

Slide 88 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 89

Slide 89 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 examples • Separate partials for: • grids, typography, colours, forms, tables • mixins & variables • diﬀerent post types for blogs • adverts • media queries • site sub-sections

Slide 90

Slide 90 text

Slide 91

Slide 91 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 “ @extend The @extend directive (tells) Sass that one selector should inherit the styles of another selector. http://nex-3.com/posts/99-selector-inheritance-the-easy-way-introducing-extend

Slide 92

Slide 92 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 why extend rocks Lets you add styles from one selector to another, as well as its own styles.

Slide 93

Slide 93 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @extend • nest @extend .classname; • goes inside another class • don’t have to use multiple classes • association is in CSS not HTML

Slide 94

Slide 94 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 @extend .error { border: 1px #f00; background: #fdd; } .badError { @extend .error; border-width: 3px; } SCSS .error, .badError { border: 1px #f00; background: #fdd; } .badError { border-width: 3px; } CSS

Slide 95

Slide 95 text

Slide 96

Slide 96 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 gotchas! A few things to watch out for when working with SCSS.

Slide 97

Slide 97 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012

Slide 98

Slide 98 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 /facepalm • make sure you’re running your compiler • make sure it’s not CSS • watch out for escaping #{values} • be aware of inheritance • when you go back to CSS, don’t forget your inheritance

Slide 99

Slide 99 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 codekit

Slide 100

Slide 100 text

Slide 101

Slide 101 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 useful links

Slide 102

Slide 102 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 learn more • http://sass-lang.com/ • http://www.youtube.com/watch? v=fbVD32w1oTo • https://twitter.com/teamsassdesign • https://twitter.com/scottkellum • http://www.slideshare.net/ginader/sass- compass-and-the-new-tools-open-web- camp-iv

Slide 103

Slide 103 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 learn more • http://incident57.com/codekit/ • http://compass-style.org/ • http://thesassway.com/projects/sass- twitter-bootstrap • http://foundation.zurb.com/ • http://zengrids.com/ • http://jaredhardy.com/sassy-buttons/

Slide 104

Slide 104 text

@IRISHSTU AN INTRODUCTION TO SASSY CSS #REFRESHDUBLIN 18 JULY 2012 thank you! feedback, comments, links? @irishstu