CODEWITHSUNDEEP
csslessrgba
Oliver Spryn
Oliver Spryn

Reputation: 17368

LESS Compiler Converts RGBA() to Hex

I am creating a LESS stylesheet with the SimpLESS compiler, and I notice when I create an entry using the CSS rbga() function, like this:

@contentDefaultOpacity: 0.5;

header#main-header {
    nav.navbar {
        div.container-fluid {
            div.collapse {
                ul.nav {
                    li {
                        a {
                            @alpha: 255 * @contentDefaultOpacity;

                            color: rgba(255, 255, 255, @alpha);
                        }
                    }
                }
            }
        }
    }
}

The compiler throws away the rgba() and outputs this instead:

header#main-header nav.navbar div.container-fluid div.collapse ul.nav li a {
    color: #ffffff;
}

Is there a way I can retain the rgba()?

Thank you for your time.

Upvotes: 1

Views: 336

Answers (2)

helderdarocha
helderdarocha

Reputation: 23627

If you wish to generate the CSS rgba() function (instead of static hex color codes generated by Less), you can do so by using a string with interpolated variables, and the ~ operator to remove the quotes. This Less code:

@contentDefaultOpacity: 0.5;

a {
    @alpha: @contentDefaultOpacity;
    color: ~'rgba(255, 255, 255, @{alpha})';
}

will generate the CSS:

a {
  color: rgba(255, 255, 255, 0.5);
}

Upvotes: 3

SLaks
SLaks

Reputation: 887867

LESS' rgba() function takes a percentage between 0% and 100%.
You're passing 128, which is fully opaque.

Upvotes: 4

Related Questions