CODEWITHSUNDEEP
google-chromeless
Simon_Weaver
Simon_Weaver

Reputation: 145990

Strategy for using custom css properties to debug LESS css mixins

I have created a couple LESS mixins to help me during debugging.

.comment(@name, @comment)
{
    & when (@debugMode = true)
    {
        -rr-@{name}: @comment;
    }
}

then I call it in a breakpoint (I have mixins that I call for each breakpoint width).

 .comment(video-layout, ontop);

This outputs a 'comment' in my CSS.

@media screen and (min-width: 23em) {

    #pnlBladeVideos 
    {
       -rr-video-layout: ontop;
    }
}

The idea being that when creating a responsive design with breakpoints I can find properties I may have used in mixins to create my css. (yes I know about sourcemap support but this is above and beyond that).

Unfortunately because -rr-video-layout is not recognized by the browser it just crosses it out. Sure I can still see the value, which is useful but I'd really like to see which one is actually in effect for a particular breakpoint.

enter image description here

Is there any way to either :

Upvotes: 2

Views: 209

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

content probably can do the trick (since it affects only ::before and ::after but still considered as valid property for any selector (at least by Chrome)). I.e.:

.comment(@name, @comment) when (@debugMode = true) {
    content: "@{name}: @{comment}";
}

Upvotes: 4

Related Questions