Stylesheets

Mayu uses Klenod and Lightning CSS to parse, transform and minify CSS. Lightning CSS automatically compiles many modern CSS syntax features to more compatible output. Read more in their documentation

You can write CSS directly inside components. Class and tag-selectors are scoped to components, so you don’t have to worry about naming.

The stylesheet for each component will become a separate file, and the filename will be based on the content hash.

This means that stylesheets can be cached in the browser very easily, so that they only will be downloaded when the stylesheet has updated.

Examples

The following example shows how tag-selectors get their class names.

%button Click me
:css
  button { color: #f0f; }

This will be transformed into the following Ruby code:

public def render
  Mayu::Runtime::H[:button, "Click me", class: ClassNames[:__button]]
end

And generate the following output:

<button class="/app/components/Button_button?abc123">Click me</button>

You can also use class names:

%p.text Hello world
:css
  .text { color: #f0f; }

But usually you don’t have to bother with class names. If you keep your components small you can more easily target elements by their names.

:ruby
  Button = import("/components/Button")
%article
  %Button Click me
:css
  article {
    border: 1px solid #f0f;
  }
  Button {
    background: #0f0;
  }

This also works with components, as long as they pass the class-prop to to any of their elements. The following component would, used in the previous example, get the generated class name for Button.

%button(class=$class)
  %slot

Conditional styles

You can pass symbols, strings, arrays and hashes in the class-prop. This works similarly to the classnames library for JS.

Here is an example of a <li>-tag that applies the .active-class if the active-prop is truthy.

%li{class: { active: $active }}
  %slot
:css
  li { opacity: .5; }
  .active { opacity: 1; }

Behind the scenes, Klenod gives every Haml component a ClassNames object. You probably don’t have to use it often, but it can be really useful sometimes.

ClassNames[:button]
#=> "button_hash"
ClassNames[:button, active: false]
#=> "button_hash"
ClassNames[:button, active: true]
#=> "button_hash active_hash"
ClassNames[:button, "foobar"]
#=> "button_hash foobar"

Root stylesheet

You can write styles for the root document in ´app/root.css´. This is a good place to set up CSS variables and global overrides for your document. Example