EE Insider Tips
Sponsored by Mijingo's EE 2 Screencasts
ExpressionEngine mini-howtos created by the EE Insider community.
Use variables in CSS that’s generated by EE
- Posted by Philip Zaengle
- May 29, 2009
- 5 people have found this tip helpful.
Sometimes it’s great to use ExpressionEngine to manage CSS, sometimes not. But when I do it’s a great help to use variables in the css document. You can use this for everything from setting colors, fonts, or even debugging.
Often times the same color is used over and over again in a stylesheet. To help with that use:
{assign_variable:dark_grey="#282828"}
By using this code I don’t have to remember the hex value of each color, instead I can use variable {dark_grey}. You could use global variables for this, but it’s much easier to edit in page if you need to adjust the colors.
You can also do things like:
{assign_variable:debug_border="border: 1px solid red;"}
instead of typing out borders to debug each time.
Or font families like this:
{assign_variable:default_font="Courier, 'Courier New', monospace"}
// then use it like this
.myclass{
font-family: {default_font};
}
Don’t forget to turn template caching on when using this! no need to re-generate the css each time!
Email
Print
Post to Twitter
Post to Delicious
Sean Smith — 14:35 on 05.29.2009
Brilliant, will be using this immediately
Add Your Comment?
You must have an EE Insider account to post comments on Insider Tips. It's fast, easy and hassle-free.
Sign up now (or login).