Implementing third party css into own less structure

Question

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?

Bass Jobsen · Accepted Answer · 2015-01-15 18:51:31Z

1

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.

answered Jan 15, 2015 at 18:51

Bass Jobsen

49.1k16 gold badges147 silver badges226 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Over a year ago

I will try this and report back, thanks for good suggestions!

Collectives™ on Stack Overflow

Implementing third party css into own less structure

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related