100% Pure Sass

Slide 1

x§ 100% pure @sturobson Breaking Borders, Reading, October 2014

Slide 2

Stu Robson Sass News LDN Sass SitePoint front-end developer @sturobson Breaking Borders, Reading, October 2014

Slide 3

@sturobson Breaking Borders, Reading, October 2014

Slide 4

Slide 5

Slide 6

@sturobson Breaking Borders, Reading, October 2014

Slide 7

What is Sass? @sturobson Breaking Borders, Reading, October 2014

Slide 8

• Websites are getting bigger. • Bigger sites mean more CSS. • We need to organise our CSS so it’s maintainable • Maintaining one CSS file is a pain. @sturobson Breaking Borders, Reading, October 2014

Slide 9

• Using a preprocessor can help this. • Sass has features that don’t exist in CSS. • Sass can make your stylesheets maintainable. • Sass doesn’t fix your bad CSS. @sturobson Breaking Borders, Reading, October 2014

Slide 10

@sturobson Breaking Borders, Reading, October 2014

Slide 11

.scss .css @sturobson Breaking Borders, Reading, October 2014

Slide 12

Sass not SASS @sturobson Breaking Borders, Reading, October 2014

Slide 13

“If you see something, say something. Only you can prevent over-capitalisation.” @sturobson Breaking Borders, Reading, October 2014

Slide 14

#Sasshole @sturobson Breaking Borders, Reading, October 2014

Slide 15

Installing Sass @sturobson Breaking Borders, Reading, October 2014

Slide 16

@sturobson Breaking Borders, Reading, October 2014

Slide 17

@sturobson Breaking Borders, Reading, October 2014

Slide 18

@sturobson Breaking Borders, Reading, October 2014

Slide 19

@sturobson Breaking Borders, Reading, October 2014

Slide 20

@sturobson Breaking Borders, Reading, October 2014

Slide 21

Variables @sturobson Breaking Borders, Reading, October 2014

Slide 22

• A way to store reusable information. • Sass uses the $ to make a variable. • When compiled replaces the $variable through the stylesheet Variables @sturobson Breaking Borders, Reading, October 2014

Slide 23

@sturobson Breaking Borders, Reading, October 2014 Variables

Slide 24

@sturobson Breaking Borders, Reading, October 2014 Variables

Slide 25

The Facebook Blue     #3B5998

@sturobson Breaking Borders, Reading, October 2014 Variables

Slide 26

@sturobson Breaking Borders, Reading, October 2014 Variables

Slide 27

Colour Font Families Margins Paddings Widths Media Queries Border Radius Box Shadow And so on And so on @sturobson Breaking Borders, Reading, October 2014 Variables

Slide 28

Nesting @sturobson Breaking Borders, Reading, October 2014

Slide 29

• Sass allows rules to be nested within one another. • The inner rule only applies within the outer rules selector. • This can help make complex CSS much simpler. Nesting @sturobson Breaking Borders, Reading, October 2014

Slide 30

@sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 31

@sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 32

@sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 33

@sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 34

@sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 35

• Never go more than 4 levels deep. • Never go more than 3 levels deep. • Never nest your Sass. @sturobson Breaking Borders, Reading, October 2014 Nesting

Slide 36

Parent Selector @sturobson Breaking Borders, Reading, October 2014

Slide 37

Parent Selector • Using the ampersand (&) references the parent selector • Allows for simple and complex usage than just nesting • The ‘&’ tells Sass to pull in the entire parent selector where it’s placed. @sturobson Breaking Borders, Reading, October 2014

Slide 38

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Slide 39

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Slide 40

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Slide 41

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Slide 42

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Slide 43

Mixins @sturobson Breaking Borders, Reading, October 2014

Slide 44

Mixins • Allows you to create reusable blocks of CSS. • You can values into mixins to make the more flexible. • A good use of mixins (was) is for vendor prefixes. @sturobson Breaking Borders, Reading, October 2014

Slide 45

@sturobson Breaking Borders, Reading, October 2014 Mixins

Slide 46

@sturobson Breaking Borders, Reading, October 2014 Mixins

Slide 47

Functions @sturobson Breaking Borders, Reading, October 2014

Slide 48

Functions • Sass comes with some built-in functions • Numeric Functions • Colour Functions @sturobson Breaking Borders, Reading, October 2014

Slide 49

• Percentage • Ceil • Floor • Round @sturobson Breaking Borders, Reading, October 2014 Functions

Slide 50

@sturobson Breaking Borders, Reading, October 2014 Functions

Slide 51

@sturobson Breaking Borders, Reading, October 2014 Functions

Slide 52

Operators @sturobson Breaking Borders, Reading, October 2014

Slide 53

@sturobson Breaking Borders, Reading, October 2014 Operators • Sass gives the ability to do maths in CSS • Uses operators like: +, -, /, * and %

Slide 54

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 55

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 56

@sturobson Breaking Borders, Reading, October 2014

Slide 57

And? @sturobson Breaking Borders, Reading, October 2014

Slide 58

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 59

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 60

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 61

@sturobson Breaking Borders, Reading, October 2014 Operators

Slide 62

@sturobson Breaking Borders, Reading, October 2014

Slide 63

• @SassNews - http://bit.ly/SassNews • @SassCSS - http://sass-lang.com/ • @Sassmeister - http://sassmeister.com/ • @StuRobson - http://www.alwaystwisted.com @sturobson Breaking Borders, Reading, October 2014

Slide 64

Thank you @sturobson Breaking Borders, Reading, October 2014

Slide 65

100% pure @sturobson Breaking Borders, Reading, October 2014