Vanilla+PostCSS as an Alternative to SCSS

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • postcss-preset-env

    Discontinued Convert modern CSS into something browsers understand

    Switching from a ready-made tool like Sass or a recommendation package like cssnext (deprecated since 2019) or PostCSS Preset Env (archived in 2022), to the modular PostCSS Preset Env plugin set we can choose a helpful and convenient set of future CSS features beyond the current stable client CSS.

  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    As a front-end web developer, do you still use CoffeeScript or jQuery? Unlikely, as TypeScript, ES/TC39 and Babel (and the retirement of Internet Explorer thanks to @codepo8 and his EDGE team) have helped to transform JavaScript into some kind of a modern programming language.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • postcss-plugins

    PostCSS Tools and Plugins

    Switching from a ready-made tool like Sass or a recommendation package like cssnext (deprecated since 2019) or PostCSS Preset Env (archived in 2022), to the modular PostCSS Preset Env plugin set we can choose a helpful and convenient set of future CSS features beyond the current stable client CSS.

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    CSS modules are not to be confused with mixins, as they serve the opposite purpose. While mixins are components or functions to be reused globally, modules are style sheets with a local scope used in a similar way as styled components in React.

  • css-modules

    Documentation about css-modules

    CSS modules are not to be confused with mixins, as they serve the opposite purpose. While mixins are components or functions to be reused globally, modules are style sheets with a local scope used in a similar way as styled components in React.

  • css-houdini-drafts

    Mirror of https://hg.css-houdini.org/drafts

    We might think of mixins and SCSS functions as user-defined custom CSS functions functions. SCSS functions can take and process optional parameters and define complex output rules in their @return statements.

  • postcss-extend-rule

    Use the @extend at-rule and functional selectors in CSS

    Closer to possible future standards, the PostCSS Extend Rule lets you use the @extend at-rule and functional selectors in CSS, following the speculative CSS Extend Rules Specification.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • PostCSS

    Transforming styles with JS plugins

    Vanilla CSS has taken a similar path with ambitious working drafts, better browser support, and PostCSS to fill the gap for user agents lagging behind. So why is Sass/SCSS still so popular? Maybe we go so used to it that we might have forgotten what problems it was meant to solve in the first place.

  • postcss-nested

    PostCSS plugin to unwrap nested rules like how Sass does it.

    And we have to make sure that it runs before the nesting plugin, otherwise it will not work at all due to an issue when using both plugins together.

  • postcss-define-function

    PostCSS plugin for Sass-like function directive

    User defined functions might become part of CSS one day, but currently there isn't even a working draft. So I would contradict my claim at least in this aspect, when I told you to use the PostCSS define-function plugin which mimics a subset of SCSS's function syntax.

  • cq-prolyfill

    Prolyfill for CSS Container Queries

    Container queries and parent selectors have been two breakthrough achievements of CSS in 2022. There is a cq-prolyfill for container queries, but it seems that there is no simple polyfill or transpilation code that can be generated automatically.

  • less.js

    Less. The dynamic stylesheet language.

    While we may disagree whether Sass is still relevant today, Mayank's case for using Sass in 2022 sums up the many use cases for Sass/SCSS including a timeline from 2006 (Sass) to "2022+" (nesting). Nesting CSS used to one of the few good reasons left to choose Sass, SCSS (or less) in a new web project.

  • jQuery

    jQuery JavaScript Library

    As a front-end web developer, do you still use CoffeeScript or jQuery? Unlikely, as TypeScript, ES/TC39 and Babel (and the retirement of Internet Explorer thanks to @codepo8 and his EDGE team) have helped to transform JavaScript into some kind of a modern programming language.

  • coffeescript

    Unfancy JavaScript

    As a front-end web developer, do you still use CoffeeScript or jQuery? Unlikely, as TypeScript, ES/TC39 and Babel (and the retirement of Internet Explorer thanks to @codepo8 and his EDGE team) have helped to transform JavaScript into some kind of a modern programming language.

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    As a front-end web developer, do you still use CoffeeScript or jQuery? Unlikely, as TypeScript, ES/TC39 and Babel (and the retirement of Internet Explorer thanks to @codepo8 and his EDGE team) have helped to transform JavaScript into some kind of a modern programming language.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts