A presentation at Breaking Borders in in Reading, UK by Stuart Robson
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
Over recent years Sass has seen an explosion in popularity in front-end development. This talk quickly walks you through the easy wins you will get when using Sass features such as nesting, variables, mixins and more. It will also discuss that although Sass has these features to make your CSS powerful, you’re not obliged to use everything in it’s toolbox and even using some basic Sass features will make you a faster, leaner, better developer.
Here’s what was said about this presentation on social media.
