Sass: a whistle stop tour

Slide 1

Slide 1 text

Sass: A Whistle Stop Tour Milton Keynes Geek Night #8 13-03-14

Slide 2

Slide 2 text

Stuart Robson

Slide 3

Slide 3 text

Freelance Front-End Developer

Slide 4

Slide 4 text

RWDCalc.com

Slide 5

Slide 5 text

Sassifaction

Slide 6

Slide 6 text

SassnotSASS.com

Slide 7

Slide 7 text

“If you see something, say something. Only you can prevent over-capitalisation.”

Slide 8

Slide 8 text

#Sasshole

Slide 9

Slide 9 text

Sass Newsletter ! http://bit.ly/SassNews

Slide 10

Slide 10 text

@sturobson

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Syntactically awesome stylesheets a CSS extension language! created in 2006! frickin’ awesome

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

If you put shit in, you get shit out* * your mileage may vary

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Find your gateway drug

Slide 20

Slide 20 text

$variables A way of storing something you need to use regularly in your stylesheets.

Slide 21

Slide 21 text

The Facebook Blue #3B5998 Declared 261 times throughout all stylesheets! What if Zuck wanted a different shade of blue?

Slide 22

Slide 22 text

Colour! Font Families! Margins! Paddings! Widths! Media Queries! Border Radius! Box Shadow! And so on! And so on

Slide 23

Slide 23 text

Nesting

Slide 24

Slide 24 text

Don’t Follow The DOM

Slide 25

Slide 25 text

& The Powerful Ampersand

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

@mixins snippets of code! customisable with the ability to set defaults! let Sass write the menial bits of CSS for you

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

@content reprints code written (where declared) when compiling into CSS

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Colour functions Make choosing and manipulating colours easy

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

I’ve only touched the surface

Slide 34

Slide 34 text

I only mentioned one thing from Sass 3.3

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Code examples are for effect

Slide 37

Slide 37 text

Resources @SassNews - http://bit.ly/SassNews! @SassCSS - http://sass-lang.com/! @TheSassWay - http://thesassway.com/! @Sassmeister - http://sassmeister.com/! @StuRobson - http://www.alwaystwisted.com! Come to my workshop - http://bit.ly/SassWS

Slide 38

Slide 38 text

Thank You twitter: @sturobson Milton Keynes Geek Night #8 13-03-14 slides: http://bit.ly/SassIn5