lowlighter/matcha

Use SASS (SCSS).

itsmeadarsh2008 opened this issue · 12 comments

Use SASS (SCSS).

Why?

What do you want that scss gives you which isn't already in css?

Using scss will make it more configurable with less efforts

Using scss will make it more configurable with less efforts

Make what more configurable?

This means Customized Border Radius, Font-Family Etc. We can set $ Variables

This project already has logical properties which can be customised:

If you weren't already familiar with logical-properties, then you can think of them like SCSS' $variables, but more powerful.

Was there anything else you wanted SCSS for?

Other frameworks like Pico.css Also use SCSS because they want to support webkit. It can be cross-compatible with all browsers.

Other frameworks like Pico.css Also use SCSS because they want to support webkit. It can be cross-compatible with all browsers.

Custom Properties are already supported by all modern browsers including Webkit since 2017: https://caniuse.com/css-variables

I was customizing my matcha on the website, but it was throwing an error. I had no option but to add a SASS support issue because we couldn't seamlessly customize our own.

Ah yes, the customiser on this framework's own website is failing. (I'm guessing the author has hit a pricing limit with the host)

You'd be better off trying to assemble the css yourself.

The code for this framework's website is in this repo (it uses deno and vercel to do the work), but if you're unfamiliar with them then you'd be able to copy paste the css files by hand easy enough.

It would be worth closing this issue, and creating a new issue to support local offline customisation.

Wait, it wouldn't be better if we execute the JavaScript on the client side to customize CSS. Why would you need another server?

Hi @itsmeadarsh2008 !

Indeed as alreay well explained by @spartanatreyu, a CSS preprocessor don't bring much value nowadays (even CSS nesting is starting to get widely supported, but it may still be a bit early to use it). Using vanilla CSS also make it easier to serve the styles subdirectories "as is" so they can be individually imported by user.

Actually this is how the custom build are generated, each checked checkbox is a toggle to whether or not a subdirectory should be fetched. Then everything is concatenated into a single blob, so everything is already client-sided JS

Well I'm a bit lying there since the minification and optimization process is happening server-side as these kind of tools are not intended for browser usage. However the error you got should be fixed in #14, and minification can also be opted-out if wanted

Oh, I got it! Thank you. It's an amazing project 👏