代码之家 › 专栏 › 技术社区 › ChronicLogic

在较少的变量中保存多行css

less css

1

ChronicLogic · 技术社区 · 7 年前

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

我知道这是相对的胡说八道,但我想避免写边界参数一遍又一遍,我真的找不到关于它的细节在较少的文件。我试过:延伸,但我认为我还没有真正理解这个想法:/

这是为了:

.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;
}

有什么建议吗?

1 回复 | 直到 7 年前

1

2

mlickei 7 年前

你要找的是混血儿。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;
    }
}