CODEWITHSUNDEEP
cssless
ChronicLogic
ChronicLogic

Reputation: 352

Save multiple lines of css in a less variable

I was wondering if it would be possible to do something of the sort:

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

I know its relative nonsense, but I want to avoid writing the border params over and over and I couldn't really find specifics about it in the less docs. I tried :extend but I don't think I really grasp the idea yet :/

this is to make:

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

any advice?

Upvotes: 2

Views: 894

Answers (1)

mlickei
mlickei

Reputation: 36

What you're looking for is called a mixin. Mixins are defined like regular styles but can also have params in them. Here's the docs on mixins. In your case you'll want to do something like this:

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

Upvotes: 2

Related Questions