I want to include custom Sass/CSS in a rendered njk/HTML example

[mirisuzanne]

For a project like Susy (with no output CSS to include globally), or project examples that require special context/framing, it would be useful to include both markup and custom styles in a single rendered example. The CSS would be added to the head of the rendered iframe document, with markup added to the body for rendering. There would be two possible approaches to this…

Implicit Rendering:

• All html (or html-compiled) examples are rendered. This is the current behavior.
• We just need a syntax for adding CSS/Sass to one of those examples.

Explicit Rendering:

• Nothing is rendered by default.
• We add an @render or @preview annotation syntax, that accepts multiple example-block keys (not sure what we use as the hook) – rendering the selected examples together.

[wlonk]

Current workaround is to use external Sass files.

[wlonk]

@mirisuzanne if you can give a more explicit example, we can work out what it'll take in the rendering side of things.

[jgerigmeyer]

Instead of linking an @example scss/css with an @example html/njk, might we want a flag that automatically adds the documented Sass to the rendered markup example?

[robsonsobral]

might we want a flag that automatically adds the documented Sass to the rendered markup example?

I think not exactly the documented, but the @example scss, so a mixin can be showed.

[mirisuzanne]

Yeah, I could see both being useful, depending on the situation. But only showing the documented block is not likely to cover most cases.