@clone handle to copy/clone properties

After start reading this thread from @adamwathan I got to wonder if something could be done like this.

So @adamwathan points out a missing possibility to copy out the properties from a class rather than extending it, helping out the possibility of creating utilities and inject them in components easily, "mixin’ free some of the most popular CSS frameworks out there.

I’ve found that this feature was being addressed back in 2015 at #1852 , but it was with another a purpose (maybe that why it was closed?)

---

So normally we @extend SASS like this:

.foo {
    @extend .baz;
    background-color: green;
}
.bar {
    color: blue;
}
.baz {
    color: red;
}

That outputs the the following CSS:

.foo {
    background-color: green;
}
.bar {
    color: blue;
}
.baz, .foo {
    color: red;
}

---

But what if we can @clone another class properties, pretty much like LESS?

.foo {
    @clone .baz; // or @copy .baz;
    background-color: green;
}
.bar {
    color: blue;
}
.baz {
    color: red;
}

That the will output this:

.foo {
    color: red;
    background-color: green;

}
.bar {
    color: blue;
}
.baz {
    color: red;
}

---

[mindplay-dk]

If you want to copy chunks of properties, well, that’s what mixins are for.

Having to rewrite (or hack) third-party (S)CSS and wrap everything in mixins isn’t practical.

Adding another concept that’s between those two would just muddy the waters.

That’s your opinion, but people nevertheless seek this feature, and it’s a key reason why some choose LESS instead.

For one, the precedence issues caused by @import in my opinion are somewhat undeniable.

How about extending @include to allow something like @include .foo?

Or think of some other way to make this functionality (or something even better) available.

Simply dismissing the feature entirely seems a little too easy - people often ask for this feature, in fact a few developers on our team want to go back to LESS for this.

I think there is a real need here, that is not covered by @extend - can’t we think of some way to address that need without “violating CSS semantics”?

[mindplay-dk]

It’s easy to define a mixin and use that to define the utility class

It’s not easy to rewrite or hack all third-party CSS (or SCSS) files.