CSS Preprocessor

[LukeTOBrien]

Hello.

It seems that your source is using raw CSS, have you considered using a pre-processor like SASS or LESS?
Even though it would perhaps be a lot of work to re-write using a pre-processor, the advantage would be that developers can import what they need and it could make for smaller bundles.

Also if you wanted to use a pre-processor then you would consider which one to use, I personally use LESS for all my projects because it uses JavaScript whereas SASS is based on Ruby (I'm a JavaScript purist), however SASS is more popular.

I think it would be something to consider for a major release.

[LukeTOBrien]

I just noticed that you have a v5 project milestone, so I would defiantly recommend a pre-processor! (LESS for the purist)

[warengonzaga]

Thanks for the suggestion and recommendation @LukeTOBrien we'll look into it.

[eltonmesquita]

This has been throughly discussed in the past and we decided to keep things simpler and more accessible. Have a look at this past PR discussion.

In short you can still import only the pieces you want to and customise all the variables we provide. We use CSS custom properties aka CSS variables, that are more powerful than any pre-processor can be as it's available on run-time

[LukeTOBrien]

I agree that native CSS variables are better, but it was rather things like Mixins, Extend and Functions.
Variables can be useful when creating classes, for eg here in my project I am looping round colour names and creating a class for each one:

@colours: {
    primary: #007bff;
    secondary: #6c757d;
    tertiary: salmon;
    light: #f8f9fa;
    dark: #343a40;
    success: #28a745;
    info: #17a2b8;
    warning: #ffc107;
    danger: #dc3545;
}
each(@colours, {
    @var: ~'var(--@{key})';
    @lightened: if(luma(@value) < 50%, lighten(@value, 10%), darken(@value, 10%));
    .@{key} {
        background-color: @var;
        color: if(luma(@value) > 50%, black, white);
        border: 1px solid @var;
        &:hover {
            background-color: @lightened;
            border-color: @lightened;
        }
        &:active {
            box-shadow: 0 0 10px @var;
        }
        &.outline {
            background-color: initial;
            color: @var;
            border-color: @var;
            &:hover {
                background-color: @var;
                color: if(luma(@value) > 50%, black, white);
            }
        }
        &.right-rounded {
            border-right: 1px solid @var;
        }
        &.left-rounded {
            border-left: 1px solid @var;
        }
    }
})

Anywho I appreciate what you say and CSS it will be better to make more use of CSS variables.