Less CSS 响应修饰符

Question

我正在尝试创建一个实用程序优先的 CSS 类集合，类似于 Tailwind，但在 Less 中。其中很大一部分是使用响应式修饰符，使用这个 className 语法：.large\:text-white.

下面的代码工作得很好，除了一件事：\: 不应该在默认的类上呈现（媒体查询之外的类。他们应该如预期的那样使用句点渲染 .foo.

我不知道如何解决这个问题。

@screens: {
    small:          320px;
    medium:         768px;
    large:          1024px;
}

@padding: {
    0:              0;
    10:             1rem;
    20:             20rem;
    30:             30rem;
}

@colors: {
    white:          #fff;
    silver:         hsla(0, 0%, 90%, 1);
}

@responsive-modifiers: true;

#config () {
    .generate(pt, padding, @padding);
    .generate(py, padding-top, @padding);
    .generate(text, color, @colors);
    .generate(background, background-color, @colors);
}

// Call the mixin
#config();


each(@screens, {
    @media (min-width : @value) {
        .@{key} when (@responsive-modifiers = true) {
            #config();
        }
    }
})

.generate(@prefix, @property, @list) {
    each(@list, {
        &\:@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}

Answer 1

我通过添加一个 period/dot 变量解决了这个问题。这是最终代码。效果很好：

@screens: {
    small:          320px;
    medium:         768px;
    large:          1024px;
}

@padding: {
    0:              0;
    10:             1rem;
    20:             20rem;
    30:             30rem;
}

@colors: {
    white:          #fff;
    silver:         hsla(0, 0%, 90%, 1);
}

@responsive-modifiers: true;

#config () {
    .generate(pt, padding, @padding);
    .generate(py, padding-top, @padding);
    .generate(text, color, @colors);
    .generate(background, background-color, @colors);
}

@period: .;
@{period} {
    #config();
}


each(@screens, {
    @media (min-width : @value) {
        .@{key}&\: when (@responsive-modifiers = true) {
            #config();
        }
    }
})

.generate(@prefix, @property, @list) {
    each(@list, {
        &@{prefix}-@{key} {
            @{property}: @value;
        }
    });
}

Less CSS 响应修饰符

Less CSS responsive modifier

less