All-in-one Sass Replacement?

TheJaredWilcurt commented 3 years ago

Curious if there is a single npm install that can take this:

$brandColor: #F00
$mainWdith: 600px

.parent
    display: grid
    grid-template-areas: 
      'header  header  header'
      'sidebar content ad'
      'sidebar footer  footer'
    .child
        background: $brandColor
        width: $mainWidth + 200
        box-shadow:
          1px 1px 1px #F00,
          2px 2px 2px #00F

and produce

.parent {
    display: grid;
    grid-template-areas: 'header  header  header' 'sidebar content ad' 'sidebar footer  footer';
}
.parent .child {
    background: #F00;
    width: 800px;
    box-shadow: 1px 1px 1px #F00, 2px 2px 2px #00F;
}

I've seen most of this covered as individual Post-CSS plugins, but haven't seen an "all-in-one" Sass replacement that is easier to set up than the real thing. If you add in the ability to do linting, then I'd be interested in swapping Sass out for it in personal projects. Then maybe building tooling around it and contributing. Right now I've been using Sass for so long I can't reasonably justify leaving it to do more work for less features.

ai commented 3 years ago

Nope.

One of the problem, is that CSS processing will be much faster if you will run SugarSS, Autoprefixer, and all other plugins together.

But you can create an all-in-one dependency, which will respect postcss.config.js by postcss-load-config and have some build-in plugins.

TheJaredWilcurt commented 3 years ago

...yeah, that's what I meant. Is there a thing that already did that

postcss / sugarss

All-in-one Sass Replacement? #79