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

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

@sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

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

• 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

• 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

@sturobson Breaking Borders, Reading, October 2014

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

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

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

#Sasshole @sturobson Breaking Borders, Reading, October 2014

Installing Sass @sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014

Variables @sturobson Breaking Borders, Reading, October 2014

• 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

@sturobson Breaking Borders, Reading, October 2014 Variables

@sturobson Breaking Borders, Reading, October 2014 Variables

The Facebook Blue 
 
 #3B5998

@sturobson Breaking Borders, Reading, October 2014 Variables

@sturobson Breaking Borders, Reading, October 2014 Variables

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

Nesting @sturobson Breaking Borders, Reading, October 2014

• 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

@sturobson Breaking Borders, Reading, October 2014 Nesting

@sturobson Breaking Borders, Reading, October 2014 Nesting

@sturobson Breaking Borders, Reading, October 2014 Nesting

@sturobson Breaking Borders, Reading, October 2014 Nesting

@sturobson Breaking Borders, Reading, October 2014 Nesting

• 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

Parent Selector @sturobson Breaking Borders, Reading, October 2014

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

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

@sturobson Breaking Borders, Reading, October 2014 Parent Selector

Mixins @sturobson Breaking Borders, Reading, October 2014

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

@sturobson Breaking Borders, Reading, October 2014 Mixins

@sturobson Breaking Borders, Reading, October 2014 Mixins

Functions @sturobson Breaking Borders, Reading, October 2014

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

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

@sturobson Breaking Borders, Reading, October 2014 Functions

@sturobson Breaking Borders, Reading, October 2014 Functions

Operators @sturobson Breaking Borders, Reading, October 2014

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

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014

And? @sturobson Breaking Borders, Reading, October 2014

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014 Operators

@sturobson Breaking Borders, Reading, October 2014

• @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

Thank you @sturobson Breaking Borders, Reading, October 2014

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