Question

我试图创建效用优先的CSS类集合，类似于Tailwind，但在Less中。其中很大一部分是使用响应修饰符，并使用以下className语法：.large\:text-white。

以下代码可以很好地工作，除了以下几点：\:不应在默认类（媒体查询之外的类）上呈现。它们应按句点呈现，如预期的{{1 }}。

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

.foo

Answer 1

我通过添加一个句点/点变量解决了它。这是最终代码。效果很好：

@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;
        }
    });
}

更少的CSS响应修饰符

1 个答案: