Less colors mixins

Question

I am trying to make some mixins for less, but i have not luck.

This is what i have in less

@brand : #30AEE3;

.preloader-window {
    background: none repeat scroll 0 0 @brand;
}

But in the end i need to add opacity to that color and some other properties, this is what i need to be in CSS

.preloader-window {
    background: none repeat scroll 0 0 rgba(42, 171, 226, 0.5);
}

Is it possible to finaly have good mixins that i can just chnage color and got final css as i make as simple css over?

You don't need any custom mixins for this. See [`fade`](http://lesscss.org/functions/#color-operations-fade) function (e.g. `fade(@brand, 50%)`). — seven-phases-max, Jul 17 '15 at 12:06
IE8 does not support `rgba`. So for IE8 you'll have to use either non-trasparent fallback color or some gloomy hacks like [`filter:progid:DXImageTransform.Microsoft`](https://css-tricks.com/rgba-browser-support/). — seven-phases-max, Jul 17 '15 at 12:16

score 2 · Accepted Answer · answered Jul 17 '15 at 12:43

2

You don't need a mixin:

@brand : #30AEE3;

.preloader-window {
    background: none repeat scroll 0 0 fadeout(@brand, 50%);
}

answered Jul 17 '15 at 12:43

KittMedia

1 Answers1