Marko

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 on GitHub

Contributors

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

Chat in Marko's Discord Server