Skip to content

CSS Preview is a tool for previewing selected CSS selectors in a separate column inside the vscode editor. The purpose of the tool is to give you a visual idea of your styling without leaving your editor.

sandorengholm/csspreview

Repository files navigation


logo
CSS Preview

Description

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

Preview

CSS 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

About

CSS Preview is a tool for previewing selected CSS selectors in a separate column inside the vscode editor. The purpose of the tool is to give you a visual idea of your styling without leaving your editor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published