Geek asks and answers

LESS CSS SECURITY without mixing

I just get into LESS and try to figure out how I can make css conditional expressions without mixins. I find that I have many single-line css statements that occur only once, but depend on some variable or condition, and that using mixins is a bit pointless since it will never be reused.

Example.

@add-margin: true;

body {
    margin-top: 20px;  //I only want this if add-margin is true
}

Ideally, I want:

body when (@add-margin) {
     margin-top: 20px;
}

But that does not work. Using mixin works, but it seems silly to make it for only one liner. Is there an alternative way I can do this?

thank

+5
source share
3 answers

no, in this form it is impossible.

0 1 20, JavaScript ( ), true 0 20 , , , .

+1

, , .

@add-margin: true;

.margin() when (@add-margin) {
    margin-top: 20px;
}

body { .margin(); }

: LESS (1.5+), " " , "css gaurds", OP

+8

CSS Less v1.5.0 , , .

@add-margin: true;

body when (@add-margin){
    margin-top: 20px;
}

, , , &.

& when (@add-margin){
    body{
        margin-top: 20px;
    }
    h1{
        margin-top: 10px;
    }
}

Note: As mentioned in the comments of memeLab , any value for a variable @add-marginother than trueis equally considered false . This is due to what trueis the keyword, whereas 'true'is the value of String. For example, the following will not produce anything.

@add-margin: 'true';

body when (@add-margin){
    margin-top: 20px;
}

However, the following will work because it compares strings.

@add-margin: 'true';

body when (@add-margin = 'true'){
    margin-top: 20px;
}

If you use a smaller compiler lower than v1.5.0, then Unicornist would be the best answer .

+4
source

More articles:


All Articles