yahoo7 tech night - sass
DESCRIPTION
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.TRANSCRIPT
![Page 1: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/1.jpg)
SASSAndy Sharman
![Page 2: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/2.jpg)
Are there others like SASS?
![Page 3: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/3.jpg)
What’s SASS?
1. SASS is a preprocessor for CSS
2. Front-end preprocessors allow reusable and scalable code
![Page 4: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/4.jpg)
Precompiling
1. File watcher (--watch)
2. Minified compiling optional
3. source map files
![Page 5: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/5.jpg)
What does it have that CSS doesn’t?
superpowers
![Page 6: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/6.jpg)
SASS SuperpowersVariables
Exists in CSS3, but more abstract within SASS
![Page 7: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/7.jpg)
SASS SuperpowersMixins
Useful for abstracting repeatedly used chunks of code
![Page 8: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/8.jpg)
SASS SuperpowersExtends & Partials
Great for extending repeated code
![Page 9: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/9.jpg)
SASS SuperpowersFunctional Code
Conditional statements and while loops take the effort out of repetitive code
![Page 10: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/10.jpg)
SASS SuperpowersFunctions
Both defined by SASS and definable by you
![Page 11: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/11.jpg)
SCSS to CSSUtilising SASS’s functionality we write 2 lines to apply a gradient to the body background using SASS’s complement function
![Page 12: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/12.jpg)
SCSS to CSS
Those 2 lines of code output code like these 8
![Page 13: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/13.jpg)
CSS structure vs SASS structure
vs
![Page 14: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/14.jpg)
CSS structure
We start off with this…
![Page 15: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/15.jpg)
CSS structure
Then we need to extend it
![Page 16: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/16.jpg)
CSS structureThen some more sites come in, with custom requirements...
![Page 17: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/17.jpg)
CSS structureThen CSS starts getting so complex, it’s hard to tell what files do what
![Page 18: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/18.jpg)
CSS structure
Then this happens
![Page 19: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/19.jpg)
CSS structureWhich eventually starts looking and behaving like this...
![Page 20: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/20.jpg)
SASS structure
superpowerstime?
![Page 21: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/21.jpg)
SASS structure
That’s not to say you can’t create this...
![Page 22: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/22.jpg)
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
![Page 23: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/23.jpg)
SASS StructureUtilising a core structure allows us to abstract a lot of re-used code into manageable files
Mixins
Functions
Settingsvariables
![Page 24: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/24.jpg)
SASS StructureUtilise that strong core architecture to rapidly build custom features
Mixins
Functions
Settingsvariables
Modularchunks
![Page 25: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/25.jpg)
SASS StructureWe build a fully extensible and manageable stylesheet management framework
Mixins
Functions
Settingsvariables
Modularchunks
Template
![Page 26: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/26.jpg)
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
![Page 27: Yahoo7 Tech Night - SASS](https://reader033.vdocuments.us/reader033/viewer/2022061219/5483c193b4af9fff018b45ce/html5/thumbnails/27.jpg)
Questions?