SASS Guide: So You're New Here! File structuring and the @use & @forward rules

Опубликовано: 23 Ноябрь 2023
на канале: Top Marks Development

273

Thanks to a comment from one of you lovely viewers, here is a little guide to file structuring and the `@use` and `@forward` rules. I hope you find it useful and get some good knowledge out of it!

If you want me to do a tutorial on something else then drop in a comment - I'd be more than happy to take a little look.

If you're new to SASS and are developing using VS Code (as I am in this video); you'll be glad to hear that I maintain an extension that compiles all your SASS into CSS! You can check out the extension below! It is easy to use and, best of all, it's FREE! Also, you can see some guides/tutorials on how to use it at: • Live SASS Compiler - A VS Code Extension

Live SASS Compiler (VS Code): https://marketplace.visualstudio.com/...

Note: sorry for the clacking and clicking. I didn't realise my microphone was picking them up so clearly - and rerecording for the 8th time seemed a little overkill for such a small area of noise. Hope you love it still 🥰

---

00:00 Intro
00:29 Sturcturing (7 into 1)... STOP
00:46 Why "into 1" may not be best
01:04 An example of a better way
01:48 Why modules might be better
03:40 But mine's just a library
04:17 Closing thoughts on structuring
04:37 Ahhh, not the @import rule
05:18 The @use rule
05:52 @use: How to write it (and @forward) out
06:00 @use: SASS's built-in modules
07:40 @use: How SASS finds your modules
09:07 @use: It knows CSS too!
09:51 @use: Namespaces
10:53 @use: Configuration - hiding members
11:37 @use: Configurable variables
12:51 @use: Configure further with overwrites
13:38 The @forward rule
14:21 @forward: Namespaces
15:40 @forward: Configuration - further hiding
16:14 @forward: Configurable configurables
17:28 Wrapping up