Sass/SCSS
Hey everyone, I'm just starting out and trying to wrap my head around Sass/SCSS. So far, I've gathered that it helps make CSS more structured and readable. But am I missing something? Is there more to it than just a syntax tweak for better readability?
4 Replies
Lots more, although looking at their website and documentation they don't communicate it. https://sass-lang.com/documentation/variables/ you have access to computing values and control flow you can also remove the need for repetition (if you have 20 colours you want to apply to different children, you can put the colours into an array and generate the styles based on them).
Also it doesn't just make CSS more structured and readable it again removes repetition, you can have multiple selectors and inside multiple selectors and rather than having to figure out the combinations yourself it's done for you, as well as making it super readable and to have related styles and children together.
You can also make your own mixins and placeholders to do some powerful stuff that can help you with consistency by grouping up important styles, although the benefit has diminished since css variables, but can still be useful.
You can probably get away with just using Sass/SCSS as it being so much nicer to format CSS, quite often the extra stuff is fairly niche, and the useful stuff you're still better off handling it yourself such as there being a built in function to make a colour lighter but you're probably better off hand picking the colour.
I use Stylus which is very similar to Sass but even less typing (no colon needed) and I only really utilise it when reducing repetition.
I also don't see people using the extra features a huge amount, nesting and parent selectors are what people use it and other pre-processors for most of the time
Sass: Variables
Syntactically Awesome Style Sheets
another thing that sass lets you do is to actually organize yourself
instead of having a huge css file with over 10000 lines, you can have multiple smaller files that you can include
I mean you can have that in css too xD (but I agree the tools you have with sass provide a bit more)
you can, but it has performance implications