CODEWITHSUNDEEP
csslessstylesheet
Andreas
Andreas

Reputation: 1479

Implementing third party css into own less structure

If I want to implement a third party css, which Ive been given from an outside source into my own less-compile structure. Is there any sure-fire way of going about this. Since I could expect the external source to be updated from time to time I would like to make as little changes to it as possible while in some way map it into my local compiled css.

For example if my stylesheet sets the button class to "k-button" while the external css sets it to "button", is there a nice way to make the names match while still ensuring that they are totally seperate?

Upvotes: 0

Views: 65

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

You can possible use the extend feature:

The following Less code:

.button {
background-color: yellow;
}
.button-k {
background-color: red;
}

.button:extend(.button-k){}

outputs:

.button {
  background-color: yellow;
}
.button-k,
.button {
  background-color: red;
}

resulting that .button's background-color now will be red.

In the situation that both classes not having set the same properties, you can try to reset the values not defined by the .button-k:

.button {
border: 1px solid white;
background-color: yellow;
}
.button-k {
border: initial;
background-color: red;
}

.button:extend(.button-k){}

Without the border: initial; declaration .button class will still got a white border from the original declaration.

Upvotes: 1

Related Questions