Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Stuart Robson

October 21, 2014
Tweet

More Decks by Stuart Robson

Other Decks in Programming

Transcript

  1. • 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
  2. • 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
  3. “If you see something, say something. Only you can prevent

    over-capitalisation.” @sturobson Breaking Borders, Reading, October 2014
  4. • 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
  5. 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
  6. • 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
  7. • 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
  8. 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
  9. 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
  10. Functions • Sass comes with some built-in functions • Numeric

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

    Borders, Reading, October 2014 Functions
  12. @sturobson Breaking Borders, Reading, October 2014 Operators • Sass gives

    the ability to do maths in CSS • Uses operators like: +, -, /, * and %
  13. • @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