Goodbye Sass, Hello CssPresetEnv

Jonas Galvez — Thu, 20 Jun 2019 15:12:41 +0000

For a long time every project I worked with depended on node-sass and sass-loader. It always bothered me that CSS itself wouldn't allow nesting of rules. Recently I learned you can have access to stage 0 css-preset-env features in Nuxt via nuxt.config.js:

export default {
  build: {
    postcss: {
      preset: {
        stage: 0
      }
    }
  }
}

Now your <style> blocks in Nuxt can read like:

<style>
& .content {
  flex-basis: 75%;
  padding: 20px;
  & h3 {
    user-select: none;
    & span {
      color: #2f495e !important;
      text-shadow: 1px 1px #fff;
      margin-bottom: 0px;
      border-bottom: 2px solid #2f495e;
    }
    &:not(:first-of-type) {
      margin-top: 50px;
    }
  }
}
</style>

Note that syntax is a bit different (and current syntax highlighters can't really grok it): you're always required to use a nesting selector (&), but otherwise it feels just about the same.

There's a ton of other css-preset-env goodies you can use.

Make sure to check them out!

Forem: Jonas Galvez

Goodbye Sass, Hello CssPresetEnv