Tutorial – advanced styled_objects on Rails
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:
@brand_color: #4D926F; @base_color: #111; @border-thickness: 1px;
Now, on any template or partial CSS file you can use these variables like this:
color: @brand_color; border: @border-thickness solid @base_color;
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:
<%= yield %>
And create the respective CSS under app/views/containers/_box.css:
border: 2px solid #333;
That's it! No need for additional markup, (although you may need to if you have to decorate the box partial with images, for instance).
Now you only have to call your partials with a box layout like this:
<%= include :partial => 'article_summary', :layout => 'containers/box' %> <%= include :partial => 'top_headlines', :layout => 'containers/box' %>
Debug your stylesheets
Introducing variables can lead to syntax errors that, because the final stylesheet is generated on the server, cannot be debug on a browser.
How to debug the result?
In development mode, when a change you made broke your stylesheet generation, you can:
Open the generated page source on your browser and look for something like <style src="<link href="/styledobjects/...
Copy this URL into the browser (by prefixing it with "http://localhost:3000" or the port your are developing on) and:
1. Check the log/development.log for syntax errors
2. Check the screen for errors. You will probably get a LESS error, indicating which sentence went wrong
Most errors are unknown declared variables, and LESS will tell you something like:
Less::VariableNameError
@myvarname
This will tell that you are using a variable named myvarname thatis not declared.
More resources
#4D926F;
Enjoy this article?
