LessCSS: Nesting functions within concatenated classes

Question

I'm having real issues with getting LessCSS to process a file that has a series of nested rules using the "&" concatenation selectors.

For example, the following will work without errors:

.grey-table {
    background: #EDEDED;
    tr {
        th {
            background: #DEDEDE;
        }
        td {
            color: #888;
        }
        &:nth-child(odd) {
            td {
                background-color: #F9FCFF;
            }
        }
        &:nth-child(even) {
            td {
                background-color: #EDF5FF;
            }
        }
        &:hover {
            td {
                background-color: #DFEAF9;
            }
        };
    }
}

However if I change the colours to be a function (of any sort - predefined or mixin), I get the error

"Syntax Error on line 12 - undefined"

 .grey-table {
    background: desaturate(#EDEDED, 100%);
    tr {
        th {
            background: desaturate(#DEDEDE, 100%);
        }
        td {
            color: desaturate(#888, 100%);
        }
        &:nth-child(odd) {
            td {
                background-color: desaturate(#F9FCFF, 100%); <------ Line 12
            }
        }
        &:nth-child(even) {
            td {
                background-color: desaturate(#EDF5FF, 100%);
            }
        }
        &:hover {
            td {
                background-color: desaturate(#DFEAF9, 100%);
            }
        };
    }
}

I cannot find any reference material on this but I'm sure I can't be the only one?

Many thanks.

Martin Turjak · Accepted Answer · 2013-02-27 13:17:29Z

3

i usually define the colors first and then call them in the functions:

@mycolor: #F9FCFF;
desaturate(@mycolor, 100%);

I am sorry, but there are no errors with your code on the less page: http://less2css.org/

Try pasting it in (without your <---line 12) and you will see it works. MAybe you are using some javastript that interacts with the less script on your page.

Edit: You also have an semicolon at the end that breaks older versions (<=1.3.1) of the less parser. If I take it out it parses well through al versions ... and I do not manage to reproduce your error.

edited Feb 27, 2013 at 13:17

answered Feb 27, 2013 at 12:36

Martin Turjak

21.3k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JamesBirkett Over a year ago

I tried this and received the same error. I also tried defining the colours as variables but that doesn't seem to help.

Martin Turjak Over a year ago

I dunno, tried your exact code in many ways now on less ... and it seems to work for me. I am sorry ... I am not able to reproduce the error.

JamesBirkett · Accepted Answer · 2013-03-01 11:19:24Z

1

I'm an idiot and had not noticed the tab on line 12 after the colon.

That's what was causing the error, but only when there was a less css mixin/variable. Apologies to all.

answered Mar 1, 2013 at 11:19

JamesBirkett

114 bronze badges

Comments

ScottS · Accepted Answer · 2013-02-27 15:21:50Z

I agree with Martin, I cannot reproduce your error using your code above and the compiler at http://less2css.org/. The only ways I can reproduce a syntax error message on line 12 are:

Remove the colon after the background-color property.
Add some non-comment related characters after the end semi-colon (like your note <--- line 12 is invalid, but I'm sure you put that in for illustration above).
Add an end quote after either (a) the color, (b) the percentage, or (c) the parenthesis. An example of (b) - 100%'. There may be some other characters that would cause it too, but some just print right out into the css wihtout a syntax error.
A character separated by a space or other invalid character for a property name before the property name, like y background-color or *background-color.

Obviously, none of those exist in your code shown above, but you might double check that your actual code does not have some extra characters or missing characters that might be causing the issue.

Collectives™ on Stack Overflow

LessCSS: Nesting functions within concatenated classes

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related