Exporting elements

With CSS Pro, you can copy/export the HTML and CSS of not only the element you select but also of ALL its children. That means you can export hundreds or even thousands of elements in a single time.

You can share these web elements (as files or Codepen snippets) with your team or keep them on your desktop and start your folder of beautiful elements that you can use on your projects from today on.

There are 2 ways to export elements:

• On a pinned CSS window, click on "Export element"

• On Select mode, click on "Export Element"

When you export elements, no matter what settings you're using, it will export:

• the outer HTML of the element

• the CSS of the element

  • with pseudo-codes and pseudo-elements

• the CSS of all its children

  • with pseudo-codes and pseudo-elements

• all CSS variables

It does listen to your settings about one thing: if you want pseudo-classes and pseudo-elements to be copied as nested (for SASS/LESS), so if you export it to Codepen, it will already choose SCSS as the preprocessor.

If you use Elementor, for example, you can also add these exported elements as an "HTML widget".