CSS Preview

Description

CSS Preview enables you to see a visual representation of your styled selectors without leaving your editor.

Preview

How to use?

• Open a .css file
• Press CMD+Shift+P (MacOS) or Ctrl+Shift+P (Windows)
• Run the CSS Preview command (this opens a preview window)
• Enjoy writing selectors with live preview! <3

Features

--text property

.example {
    --content:
      <h1>This is a title</h1>
      <div class="circle">I\'m a circle</div>;
}

Backlog

• .scss and .less file support (without preprocessing functionality)
• Gradient tool
• Color tool
• Font tool
• Share your ideas for new features...

Release Notes

1.0.0

• Initial release of CSS Preview

1.0.1

• Updated README.md with better description of the extension.

1.0.3

• Upgraded extension to work with vscode 1.46.0

1.0.4

• Replaced the --text with a --content property where you can insert html markup to stylize a more complex element

Follow me on Twitter:

@sandorengholm