Save 37% off PRO during our Black Friday Sale! »

100% Pure Sass

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.

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

October 21, 2014
Tweet

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

  4. None
  5. None
  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