Following the building and styling a Rails app with styled_objects tutorial, we will learn how to use some advanced features of styled_objects and also some best practices to keep your CSS code maintainable while using styled_objects.
Use CSS variables
On styled_objects you can define global variables to be used throughout your CSS.
Declare variables on one place: app/views/globals.css
Example of a piece of
global.css that defines three variables:
[css]@brand_color: #4D926F;
@base_color: #111;
@border-thickness: 1px;
[/css]
Now, on any template or partial CSS file you can use these variables like this:
[css]color: @brand_color;
border: @border-thickness solid @base_color;
[/css]
styled_objects uses
LESS on the background, so you can use
LESS syntax, which is very similar to CSS. Be careful to only define global variables on a global file like application.css, so you can be sure the variable is present on all the included CSSs.
Code generic classes
OO-CSS says we should separate container styling from content styling. How can we do it using styled_objects?
Let’s say you have a container for a box block that can be used throughout many partials. How to reuse this container?
What you need is a layout partial.
Create a app/views/containers/_box.html.erb with the container markup:
[php]
