It has been more that a year that I started a new project with SASS for preprocessing my css. At one time I wanted to try how far you can take it with vanilla modern CSS these days.
My experience: Pretty far, but then there are real world problems like backwards compatibility.
I used to love SASS. I think it pushed the standards teams and browser vendors to implement new features like custom properties or css grid more rapidly.
I like the philosphy of postCSS to honor the w3c specicifications and to encourage you to write standard css syntax, even if the specific syntaxes are an early stage and are maybe going to be only implemented in nightly browser builds for now.
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:root {
--mainColor: #12345678;
}
body {
color: var(--mainColor);
font-family: system-ui;
overflow-wrap: break-word;
}
:--heading {
background-image: image-set(
url(img/heading.png) 1x,
url(img/heading@2x.png) 2x
);
@media (--viewport-medium) {
margin-block: 0;
}
}
a {
color: rgb(0 0 100% / 90%);
&:hover {
color: rebeccapurple;
}
}Source: https://github.com/csstools/postcss-preset-env
It's a similar approach like writing modern javascript for the browser.
Like @babel/preset-env, there is a postcss-preset-env, which conveniently lets you polyfill missing css browser features, without having to put too much though into which single features you want to use. You also can use a browserslist query to let postcss-preset-env figure out how to transform the css for backwards compatibility.
Maybe it's old news for you, but it came to me as a surprise: The code above is actually modern css as intended by the CSS Working Group.