search

mrcrowl / vscode-easy-less

Easy LESS extension for Visual Studio Code
MIT License
67 stars 23 forks source link

Issue with nested attributes #27

Closed ghost closed 7 years ago

ghost commented 7 years ago

The compiler creates a whitespace between the selector and the nested attricture, for example:

@base: rgba(31,187,166,1);
button{
background:@base;
    [raised]
    {
    box-shadow: inset 0px -2px 0 1px darken(@base,5%);
    }
}

compiles to:

button{
background:#1fbba6;
}
button [raised]
{
    box-shadow: inset 0px -2px 0 1px #1ba593
}

Which doesn't work obviously, it should output button[raised];

mrcrowl commented 7 years ago

To achieve what you want in less, just prefix the square brackets with & e.g.

@base: rgba(31,187,166,1); button{ background:@base; &[raised] { box-shadow: inset 0px -2px 0 1px darken(@base,5%); } }

See http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand On Fri, 9 Jun 2017 at 2:33 AM, Slacker notifications@github.com wrote:

The compiler creates a whitespace between the selector and the nested attricture, for example:

@base: rgba(31,187,166,1);button{background:@base; [raised] { box-shadow: inset 0px -2px 0 1px darken(@base,5%); } }

compiles to:

@base: rgba(31,187,166,1);button{background:#1fbba6; }button [raised] { box-shadow: inset 0px -2px 0 1px #1ba593 }

Which doesn't work obviously, it should output button[raised];

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mrcrowl/vscode-easy-less/issues/27, or mute the thread https://github.com/notifications/unsubscribe-auth/ABtooEoA52hK8Q0xBHPGnCFJK3OrHyIlks5sCAY0gaJpZM4N0KPu .