CODEWITHSUNDEEP
cssless
user254197
user254197

Reputation: 881

linear gradient with LESS function, LESS.JS -> "unrecognized input"

I would like to simplify my LESS/CSS for linear gradient with using variables.

I tried(declaring variable):

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);

I tried(defining function and combined it with classes(".BWTable-hover") and selectors)

.BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > td,
.BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
}

Result: "ParseError: Unrecognised input"

Upvotes: 1

Views: 516

Answers (1)

Harry
Harry

Reputation: 89780

When you use a parametric mixin (a mixin with input parameters) it will not produce an output directly when compiled. It has to be called from within another block. This is the reason why your code was giving error.

Quote from an article on Sitepoint:

Mixins can be made parametric, meaning they can take arguments to enhance their utility. A parametric mixin all by itself is not output when compiled. Its properties will only appear when mixed into another block.

Instead you can do it the below way. Click here for demo.

.hover(@BWTableHoverLineMarkerColor1){
 & > tbody > tr:hover > td,
    & > tbody > tr:hover > th {
        background: url(data:image/svg+xml;base64,PD...g==);
        background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
        background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
        @startcolor: argb(@BWTableHoverLineMarkerColor1); /* To convert the rgba value to hex format */
        @endcolor: argb(fade(@BWTableHoverLineMarkerColor1,45%)); /* To increase alpha for end color */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{startcolor}', endColorstr='@{endcolor}',GradientType=0 ); /* IE6-8 */
    }
}

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover{
  .hover(@BWTableHoverLineMarkerColor1);
}

On the other hand if it wasn't a parameterized mixin, you could have simply done like below:

@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
.BWTable-hover > tbody > tr:hover > td,
.BWTable-hover > tbody > tr:hover > th {
    background: url(data:image/svg+xml;base64,PD...g==);
    background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
    background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
}

Note that the above doesn't take parameters and hence cannot be re-used.

Upvotes: 2

Related Questions