100% Pure Sass

A short talk I gave at Breaking Borders on October 21st 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.

Transcript

1. x§ 100% pure @sturobson Breaking Borders, Reading, October 2014
2. Stu Robson Sass News LDN Sass SitePoint front-end developer @sturobson Breaking Borders, Reading, October 2014
3. @sturobson Breaking Borders, Reading, October 2014
6. @sturobson Breaking Borders, Reading, October 2014
7. What is Sass? @sturobson Breaking Borders, Reading, October 2014
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
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
10. @sturobson Breaking Borders, Reading, October 2014
11. .scss .css @sturobson Breaking Borders, Reading, October 2014
12. Sass not SASS @sturobson Breaking Borders, Reading, October 2014
13. “If you see something, say something. Only you can prevent over-capitalisation.” @sturobson Breaking Borders, Reading, October 2014
14. #Sasshole @sturobson Breaking Borders, Reading, October 2014
15. Installing Sass @sturobson Breaking Borders, Reading, October 2014
16. @sturobson Breaking Borders, Reading, October 2014
17. @sturobson Breaking Borders, Reading, October 2014
18. @sturobson Breaking Borders, Reading, October 2014
19. @sturobson Breaking Borders, Reading, October 2014
20. @sturobson Breaking Borders, Reading, October 2014
21. Variables @sturobson Breaking Borders, Reading, October 2014
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
23. @sturobson Breaking Borders, Reading, October 2014 Variables
24. @sturobson Breaking Borders, Reading, October 2014 Variables
25. The Facebook Blue
 
 #3B5998 @sturobson Breaking Borders, Reading, October 2014 Variables
26. @sturobson Breaking Borders, Reading, October 2014 Variables
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
28. Nesting @sturobson Breaking Borders, Reading, October 2014
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
30. @sturobson Breaking Borders, Reading, October 2014 Nesting
31. @sturobson Breaking Borders, Reading, October 2014 Nesting
32. @sturobson Breaking Borders, Reading, October 2014 Nesting
33. @sturobson Breaking Borders, Reading, October 2014 Nesting
34. @sturobson Breaking Borders, Reading, October 2014 Nesting
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
36. Parent Selector @sturobson Breaking Borders, Reading, October 2014
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
38. @sturobson Breaking Borders, Reading, October 2014 Parent Selector
39. @sturobson Breaking Borders, Reading, October 2014 Parent Selector
40. @sturobson Breaking Borders, Reading, October 2014 Parent Selector
41. @sturobson Breaking Borders, Reading, October 2014 Parent Selector
42. @sturobson Breaking Borders, Reading, October 2014 Parent Selector
43. Mixins @sturobson Breaking Borders, Reading, October 2014
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
45. @sturobson Breaking Borders, Reading, October 2014 Mixins
46. @sturobson Breaking Borders, Reading, October 2014 Mixins
47. Functions @sturobson Breaking Borders, Reading, October 2014
48. Functions • Sass comes with some built-in functions • Numeric Functions • Colour Functions @sturobson Breaking Borders, Reading, October 2014
49. • Percentage • Ceil • Floor • Round @sturobson Breaking Borders, Reading, October 2014 Functions
50. @sturobson Breaking Borders, Reading, October 2014 Functions
51. @sturobson Breaking Borders, Reading, October 2014 Functions
52. Operators @sturobson Breaking Borders, Reading, October 2014
53. @sturobson Breaking Borders, Reading, October 2014 Operators • Sass gives the ability to do maths in CSS • Uses operators like: +, -, /, * and %
54. @sturobson Breaking Borders, Reading, October 2014 Operators
55. @sturobson Breaking Borders, Reading, October 2014 Operators
56. @sturobson Breaking Borders, Reading, October 2014
57. And? @sturobson Breaking Borders, Reading, October 2014
58. @sturobson Breaking Borders, Reading, October 2014 Operators
59. @sturobson Breaking Borders, Reading, October 2014 Operators
60. @sturobson Breaking Borders, Reading, October 2014 Operators
61. @sturobson Breaking Borders, Reading, October 2014 Operators
62. @sturobson Breaking Borders, Reading, October 2014
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
64. Thank you @sturobson Breaking Borders, Reading, October 2014
65. 100% pure @sturobson Breaking Borders, Reading, October 2014