将多行 css 保存在一个 less 变量中

Question

我想知道是否可以做这样的事情：

@{basic-border} {
    border: 2px solid lightgrey;
    background-color: white;
    border-radius: 4px;
}
.border-area {
    &__top {
        @{basic-border};
        height: 60px;
        margin-bottom: 8px;
    }
    &__main-info {
        @{basic-border};
        padding: 10px;
    }
}

我知道它的相对废话，但我想避免一遍又一遍地写边界参数，我在 less 文档中找不到关于它的细节。我试过 :extend 但我认为我还没有真正理解这个想法 :/

这是为了：

.border-area__top {
    border: 2px solid lightgrey;
    background-color: white;
    border-radius: 4px;
    height: 60px;
    margin-bottom: 8px;
}
.border-area__main-info {
    border: 2px solid lightgrey;
    background-color: white;
    border-radius: 4px;
    padding: 10px;
}

有什么建议吗？

Answer 1

你要找的是一个混入。 Mixin 的定义类似于常规样式，但也可以在其中包含参数。 Here's the docs on mixins。在你的情况下你会想做这样的事情：

.basic-border() {
   border: 2px solid lightgrey;
   background-color: white;
   border-radius: 4px;
}

.border-area {
    &__top {
        .basic-border;
        height: 60px;
        margin-bottom: 8px;
    }
    &__main-info {
        .basic-border;
        padding: 10px;
    }
}

将多行 css 保存在一个 less 变量中

Save multiple lines of css in a less variable

css

less