browserslist VS Sass

Not these days, where most people are using evergreen browsers and iOS users upgrade very quickly.

Take a look at the defaults for browserslist, for example:

https://browsersl.ist/#q=defaults

It just barely supports Safari 15, on iOS only, and that’s likely to go away imminently because it’s under 1% usage.

browserslist

We compile JS only for modern browsers. The list of default browsers in Next can be overridden in your browserslist.

In the latest versions of Next.js, targeting specific browsers or features is a breeze using the Browserslist configuration in your package.json file. The latest version of Next.js (v13) uses the following configuration by default:

For a more general answer to browser support, check out https://github.com/browserslist/browserslist. That seems to be standard tool to help you with that.

As someone else pointed out, you're overestimating Chrome/ium's market share.

Regardless, after the web.dev/baseline announcement, I looked at Browslerlist and one of our site's analytics and it is shocking how many people are not using the last two versions of evergreen browsers. There is a long tail of browser versions in those stats.

https://browsersl.ist

The way folks handle this in production is with browserslist, which lets you query on different things you want to support: https://github.com/browserslist/browserslist. This in turn tells other parts of your tooling what language features to transpile for production.

I imagine tools could be built on top of that which do what you’re asking too

# .browserslist.rc # Babel Preset configuration # -------------------------- # Defines web-browser compatibility parameters for Babel to transpile your JS code. # This configuration is used by babel.config.js. # More information in here. # https://github.com/browserslist/browserslist # Support browsers with a market share higher than 5% >10%

SASS(.scss) [ https://sass-lang.com ]

Traditionally CSS lacked features such as variables, nesting, mixins, and functions. This was frustrating for Developers as it often led to CSS quickly becoming complex and cumbersome. In an attempt to make code easier and less repetitive CSS pre-processors were born. You would write CSS in the format the pre-processor understood and, at build time, you'd have some nice CSS. The most common pre-processors these days are Sass, Less, and Stylus. Any examples I give going forward will be about Sass as that's what I'm most familiar with.

CSS stands for Cascading Style Sheets, and is a scripting language used to style web pages. SCSS stands for Syntactically Awesome Style Sheet, and is a superset of CSS. You can think of SCSS as the more advanced version of CSS, which comes with several features that CSS does not support, such as the SCSS nested syntax, as shown below.

Scss

In the past, you’d need to rely on pre-processors such as SaSS or Less, but not anymore… Native CSS nesting has landed on all major modern browsers.

Sass is also a css preprocessor. Op is likely confused

sass -> An improvement over CSS. It provides nice features for managing CSS. good for mid-sized or even larger projects.

Sass (Syntactically Awesome Style Sheets) - A CSS preprocessor that simplifies and enhances your CSS workflow. Website: https://sass-lang.com/

Personally, my preference is Sass: I find that the mixins, partials, and operators are hugely useful when it comes to creating re-usable snippets of code for a design system. And, since it’s “just” a pre-processor and not a framework, it’s not opinionated in a design sense and there’s no default values (colors, spacing values, etc.) that will need to be overwritten.

Preprocessors: SSGs leverage preprocessors to streamline the development process. Preprocessors like SASS for CSS or Babel for JavaScript offer additional features and simplify code development.