Add custom CSS (or Sass/SCSS/Less) to a page

[hagenburger]

New feature

Allow page/code block-specific CSS.

Specification

<style>
  a { color: blue; }
</style>

Should add the text content of <style> to the contents of the document:

document.contents.add('css', '\n  a { color: blue; }\n')

Preprocessors

<style type="scss">
  a { color: lighten(blue, 10%); }
</style>

Should add the text content of <style> to the SCSS contents of the document:

document.contents.add('scss', '\n  a { color: lighten(blue, 10%); }\n')

The same must work for sass and less. Tbd: There should be a list of valid types which can be extended via plugin. If the type is not defined, it should raise an error.

Scoping

Often it is useful to add additional CSS to make an example look good in a style guide. A notification might have position: absolute but within the example it needs to be changed to position: relative. This change must not apply globally as the notification might be used outside of examples.

This could be solved by adding a class/ID to the code block and a scope to the <style>:

``` html .my-notification-example
<div class="my-notification error">
  An error happened.
</div>
```
<style scope=".my-notification-example">
  .my-notification {
    position: relative;
  }
</style>

That might be a bit too much to type. This should get a shortcut:

``` html
<div class="my-notification error">
  An error happened.
</div>
```
<style previous-element>
  .my-notification {
    position: relative;
  }
</style>

Tbd. previous-element is just a first idea and needs to be discussed. It could be used elsewhere:

# Headline [link](#url)

<style previous-element>
  a { color: red; }
</style>

This requires automatically generated IDs (#26).