SASSAndy Sharman
Are there others like SASS?
What’s SASS?
1. SASS is a preprocessor for CSS
2. Front-end preprocessors allow reusable and scalable code
Precompiling
1. File watcher (--watch)
2. Minified compiling optional
3. source map files
What does it have that CSS doesn’t?
superpowers
SASS SuperpowersVariables
Exists in CSS3, but more abstract within SASS
SASS SuperpowersMixins
Useful for abstracting repeatedly used chunks of code
SASS SuperpowersExtends & Partials
Great for extending repeated code
SASS SuperpowersFunctional Code
Conditional statements and while loops take the effort out of repetitive code
SASS SuperpowersFunctions
Both defined by SASS and definable by you
SCSS to CSSUtilising SASS’s functionality we write 2 lines to apply a gradient to the body background using SASS’s complement function
SCSS to CSS
Those 2 lines of code output code like these 8
CSS structure vs SASS structure
vs
CSS structure
We start off with this…
CSS structure
Then we need to extend it
CSS structureThen some more sites come in, with custom requirements...
CSS structureThen CSS starts getting so complex, it’s hard to tell what files do what
CSS structure
Then this happens
CSS structureWhich eventually starts looking and behaving like this...
SASS structure
superpowerstime?
SASS structure
That’s not to say you can’t create this...
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
SASS StructureUtilising a core structure allows us to abstract a lot of re-used code into manageable files
Mixins
Functions
Settingsvariables
SASS StructureUtilise that strong core architecture to rapidly build custom features
Mixins
Functions
Settingsvariables
Modularchunks
SASS StructureWe build a fully extensible and manageable stylesheet management framework
Mixins
Functions
Settingsvariables
Modularchunks
Template
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
Questions?