less - LessCss dynamic variables based on ancestor class

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

less - LessCss dynamic variables based on ancestor class

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have a page template which has a branding class on the body element:

<body class="brand-africa">
    <h1>Africa</h1>
</body>

Using the following Less, I can use a variable for the brand colour and apply it to the color of a CSS selector:

@brand-default: #649d84;
@brand-africa: #df6f20;
@brand-nz: #444;

.brand-color {
    .brand-default & {
        color: @brand-default;
    }
    .brand-africa & {
        color: @brand-africa;
    }
    .brand-nz & {
        color: @brand-nz;
    }
}

h1 {
    .brand-color;
}

This works well, but sometimes I want to apply the color to another CSS declaration - such as background-color, and to do this with the above code I'd need to duplicate the .brand-color mixin to instead apply background-color.

Ideally I'd like the mixin to return a variable - I know it's possible, but I can't work out how to use the classname to determine the returned value.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

436 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T00:04:21+0000

Well, no, you can't use class name to determine a variable or a return value. So it's usually done in reverse, for example like this:

@brand-default: #649d84;
@brand-africa:  #df6f20;
@brand-nz:      #444444;

h1 {
    .brand-colors();
}

h2 {
    .brand-colors(background-color);
}

.brand-colors(@property: color) {
    .color(default);
    .color(africa);
    .color(nz);

    .color(@name) {
        .brand-@{name} & {
            @value: 'brand-@{name}';
            @{property}: @@value;
        }
    }
}

Or like this:

@brand-default: #649d84;
@brand-africa:  #df6f20;
@brand-nz:      #444444;

h1 {
    .brand-colors({
        color: @color;
    });
}

h2 {
    .brand-colors({
        background-color: @color;
    });
}

.brand-colors(@style) {
    .brand-color(default);
    .brand-color(africa);
    .brand-color(nz);
}

.brand-color(@name) {
    .brand-@{name} & {
        @value: ~'brand-@{name}';
        @color: @@value;
        @style();
    }
}

Or even like this:

.brand(default) {@{color}: #649d84}
.brand(africa)  {@{color}: #df6f20}
.brand(nz)      {@{color}: #444444}

h1 {
    .brand-colors();
}

h2 {
    .brand-colors(background-color);
}

.brand-colors(@color: color) {
    .-(default);
    .-(africa);
    .-(nz);

    .-(@name) {
        .brand-@{name} & {
            .brand(@name);
        }
    }
}

Or something in between. Or... oh wait, there's whole family of methods for this stuff (incl. various combinations), see for example:

Usually list/array/loop based methods are more compact, though personally I prefer something dumb like this:

.themed({

    h1 {
        color: @color;
    }

    h2 {
        background-color: @color;
    }

});

.themed(@styles) {
    .-(default, #649d84);
    .-(africa,  #df6f20);
    .-(nz,      #444444);

    .-(@name, @color) {
        .brand-@{name} {
            @styles();
        }
    }
}

Categories

less - LessCss dynamic variables based on ancestor class

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags