Live Chat Software by Kayako |
Knowledgebase: Building your store
|
Using the CSS Preprocessor functions in the advanced style editor
Posted by David Hall on 02 October 2008 07:57 AM
|
|
|
It is possible to use variables and functions within the CSS area of the advanced style editor. These will be evaluated and cache within the client css file when requested. Variables At the top of the CSS area you can define variables as follows, these will be automatically available to the merchant in the color / font / file picker area: /* Variable definitions ==================== <ews:variable name="pagefont" description="Page font" type="font" default="100% Arial" value="100% Arial" /> <ews:variable name="pagecolor" description="Page color" type="color" default="#ffffff" value="#ffffff" /> <ews:variable name="pageimage" description="Page image" type="image" default="" value="" /> */ You should place variables in a CSS comment block to ensure the declarations will get stripped out by the preprocessor. You can use any variables in the main body of the CSS by using the syntax $variablename example below: body { font: $pagefont; color: $pagecolor; background-image: $pageimage; } Functions You can use any of the following function calls, functions can be nested and can use variables as arguments. HSL - returns a color from a set of hue (in degrees 0-360), saturation (as a %) and luminance (as a %) example: HSL(180,50%,50%) hue - returns the hue from a color example: hue(#00ff00) sat - returns the saturation from a color example: sat(#00ff00) lum - returns the luminance from a color example: lum(#00ff00) import - retrieves and embeds any external css into the sheet example: import(http://www.anothersite.com/sheettoimport.css) | |
 (161 votes) This article was helpful This article was not helpful |
|
Comments (0)