yahoo7 tech night - sass

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?