How does styled_objects work?

Page rendering

When rendering a page, styled_objects collects your templates and partial stylesheets and sets one unique URL for rendering the glued stylesheet.

Most important: styled_objects wraps each partial or template that has a corresponding CSS file within a div tag with a unique class. This class will later be used to glue your CSS together.

CSS rendering

CSS glues the required CSS files wrapping each file inside a nested rule for your partial class. For example, you have, o one page, two partials, items/_foo.html.erb and products/_bar.html.erb. The generated LESS stylesheet will be something like:

.items-foo {
  <items/foo.css contents will appear here>
}
.products-bar {
  <products/bar.css contents will appear here>
}

What does styled_objects use?

For CSS syntax and glueing styled_objects uses LESS. Learn more about LESS syntax here.

What if I don’t want <div>s around my partials?

If you really want that, you can’t use styled_objects.