How to "Duplicate class" like in Webflow/Oxygen?

How To
1

Hello all,

I tried to do this with “copy styles,” but “copy styles” seems to only be for copying and pasting classes from element to element.

The feature I’m asking for is different: a “duplicate class” feature, similar to what you see in Webflow or Oxygen builder. With this feature, you can use an existing class to create a new one from it. That way, if you want to create different variations of a class (without using specificity), you can just duplicate the class, be prompted to rename the new class before the backend adds it to the global classes list to avoid conflicts, and have a “template” to start from for the new class.

e.g.

.button {
   width: 100%;
}

If I click an imaginary “duplicate class” button, it should generate a clone that looks something like…

.button-shdhnf {
  width: 100%;
}

… that I can then rename right there in the builder on the element that the class was “cloned” on. This would speed up workflow immensely.

If this is already available, I have been unable to figure it out.

1 Like
2

Hey, yes you can.

Create the new class, click on the yellow active class. Now behind the ‘old class’ you’ll see copy styles.

New class - paste styles.

1 Like