1 | # Styles
|
2 |
|
3 | 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.
|
4 |
|
5 | ```marko
|
6 | style {
|
7 | div {
|
8 | color: green;
|
9 | }
|
10 | }
|
11 |
|
12 | <div>Hello World</div>
|
13 | ```
|
14 |
|
15 | 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](http://getbem.com/introduction/). Marko will likely provide a way to automatically scope these styles to the current component [in the future](https://github.com/marko-js/marko/issues/666).
|
16 |
|
17 | > **Note:** Style blocks (unlike `<style>` tags) do not support `${placeholders}` and must be static.
|
18 |
|
19 | ## Preprocessors
|
20 |
|
21 | 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.
|
22 |
|
23 | ```marko
|
24 | style.less {
|
25 | button.primary {
|
26 | background-color: @primaryColor;
|
27 | }
|
28 | }
|
29 | ```
|