#DEVDiscuss: Sassy CSS

Time for #DEVDiscuss — right here on DEV 😎

Getting started with SCSS - The CSS Preprocessor with Superpowers

Abdullahi Muftau ・ Aug 19 '23

#webdev #css

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?

Comments

[Ben Halpern]

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.

[Thomas Bnt ☕]

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.

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://developer.chrome.com/images/meta/favicon-32x32.png"
        loading="lazy" />
    developer.chrome.com
  </div>
</div>

[Chris Gustin]

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.