Styles

Both HTML and Marko provide support for <style> tags. However, Marko also provides a special syntax (called a style block) which adds support for CSS preprocessors and acts as a hint to bundlers to extract this static css from your templates into a common bundle.

style {
    div {
        color: green;
    }
}
 
<div>Hello World</div>

style {
  div {
    color: green;
  }
}
 
div -- Hello World

These blocks add global css to the page. The above example will not style just the <div> in the component, but all divs on the page. Because of this we recommend following a naming convention such as BEM. Marko will likely provide a way to automatically scope these styles to the current component in the future.

Note: Style blocks (unlike <style> tags) do not support ${placeholders} and must be static.

Preprocessors

If you use a css preprocessor, you can add the extension right on style. This will cause your bundler of choice to run the contents of the style block through the appropriate processor.

style.less {
    button.primary {
        background-color: @primaryColor;
    }
}

style.less {
  button.primary {
    background-color: @primaryColor;
  }
}

EDIT

Contributors

Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.

mlrawlings

+

You?