Editable stylesheet

Editable-stylesheet.markdown

Editable stylesheet

Editable stylesheet rendered in html iteself.

A Pen by Sanjay Rohila on CodePen.

License.

index.html

<style contentEditable="true">
  .demo {
    width: 150px;
    height: 50px;
    padding: 10px;
    background: teal;
    border: 2px solid indianred;
    border-radius: 10px;
    box-shadow: 3px 3px 5px 2px grey;
    font-family: sans;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px darkgray;
  }
</style>

<!-- Demo element -->
<div class="demo">
  This is demo element.
</div>

style.scss

@import "compass/css3";
style {
  display: inline-block;
  white-space: pre;
  font-size: 1em;
  border: 0;
  outline: 0;
  background: skyblue;
  color: black;
  padding: 1rem 2rem;
  &:before {
    content: "// Edit the below css- values, and see changes in box.";
  }
}

.demo {
  display: inline-block;
  margin-left: 20px;
}

body {
  background: lightcyan;
}