An introduction to what SASS is, what are some of it's strengths, and how it can outperform CSS greatly with a bit of planning.

1. SASS
Andy Sharman

2. Are there others like SASS?

3. What’s SASS?
1. SASS is a preprocessor for CSS
2. Front-end preprocessors allow reusable and scalable code

4. Precompiling
1. File watcher (--watch)
2. Minified compiling optional
3. source map files

5. What does it have that CSS doesn’t?
superpowers

6. SASS Superpowers
Variables
Exists in CSS3, but more abstract
within SASS

7. SASS Superpowers
Mixins
Useful for abstracting repeatedly used
chunks of code

8. SASS Superpowers
Extends & Partials
Great for extending repeated code

9. SASS Superpowers
Functional Code
Conditional statements and while loops
take the effort out of repetitive code

10. SASS Superpowers
Functions
Both defined by SASS and definable by
you

11. SCSS to CSS
Utilising SASS’s functionality we write 2 lines to apply a gradient to
the body background using SASS’s complement function

12. SCSS to CSS
Those 2 lines of code output code like these 8

13. CSS structure vs SASS structure
vs

14. CSS structure
We start off with this…

15. CSS structure
Then we need to extend it

16. CSS structure
Then some more sites come in, with custom
requirements...

17. CSS structure
Then CSS starts getting so complex, it’s
hard to tell what files do what

18. CSS structure
Then this happens

19. CSS structure
Which eventually starts looking and
behaving like this...

20. SASS structure
superpowers
time?

21. SASS structure
That’s not to say you can’t create this...

22. SASS structure
How to avoid the same mess
1. Architect and plan from the beginning
2. Don’t treat SASS like CSS by just using the inheritance
.SCSS != .CSS

23. SASS Structure
Utilising a core structure allows us to abstract a lot of
re-used code into manageable files
Mixins
Functions
Settings
variables

24. SASS Structure
Utilise that strong core architecture to
rapidly build custom features
Mixins
Functions
Settings
variables
Modular
chunks

25. SASS Structure
We build a fully extensible and manageable
stylesheet management framework
Mixins
Functions
Settings
variables
Modular
chunks
Template

26. SASS Summary
● Utilise SASS for large projects
● Use abstraction to build scalable front-end
frameworks
● Leverage your code off the built-in
functionality and compiler
● Avoid using SCSS files like fancy
CSS files
● Don’t enter into a large project with
SASS before first planning all sections

27. Questions?