#DEVDiscuss: Sassy CSS
#devdiscuss#discuss
Brian Bethencourt

Brian Bethencourt @devencourt

About: haha, made you look

Location:
Trenton, NJ
Joined:
Jun 13, 2019

#DEVDiscuss: Sassy CSS

Publish Date: Aug 23 '23
12 3

Time for #DEVDiscuss — right here on DEV 😎

classicthedemigod

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 3 total

  • Thomas Bnt
    Thomas BntAug 23, 2023

    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>
    Enter fullscreen mode Exit fullscreen mode

  • Ben Halpern
    Ben HalpernAug 23, 2023

    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.

  • Chris Gustin
    Chris GustinAug 26, 2023

    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.

Add comment