Time for #DEVDiscuss — right here on DEV 😎
Inspired by @classicthedemigod' Top 7 post, tonight’s topic is... Sassy CSS!
Have you ever felt there should be a way to make writing CSS easier and faster? This is where SCSS (Sassy CSS) comes in! SCSS (Sassy CSS) is a preprocessor scripting language that is compiled into regular CSS. It extends the capabilities of CSS by adding features like variables, nesting, mix-ins, and more.
Questions:
- What are the biggest challenges you have faced when working with SCSS?
- How difficult did you find it to pick up SCSS if you were already familiar with CSS? Any tips for newcomers?
- Where do you see the future of SCSS going? Do you think CSS will eventually incorporate more features that are currently SCSS-only?
- Any triumphs, fails, or other stories you'd like to share on this topic?
Top comments (3)
I've found SCSS to be one of the nicer, cleaner abstractions I've ever worked with. It helps that it was always bundled so tightly with Rails, but that didn't always work out quite so well (Coffeescript was also neat, but IMO a tougher abstraction).
As CSS proper gets more features, SCSS is less necessary though, and could go the way of Coffeescript.
I using SASS now instead of CSS, for nested class. Very useful, and also
@extend.SASS isn't difficult to learn, don' be shy to learn that!
CSS will include nesting content like SASS, the real question is : When it's available in the world, you migrating your SASS content to a classic CSS?
CSS Nesting - Chrome Developers
One of our favorite CSS preprocessor features is now built into the language: nesting style rules.
The ability to nest in SCSS is, to me, the feature that’s hardest to live without when I’m in situations where I’m having to use plain CSS. That, and the SCSS color utilities for “darken” and “lighten” make it so easy to set up color variations for pseudo state interactions, and there isn’t really a good equivalent in plain CSS yet.