[SOLVED] Share smarty variables between multiple CSS

[jsmonzani]

Hello!

I am currently using multiple CSS for an adaptive website (media-queries-specific CSS and pre-IE 9 specific files) and manually loading them in my template with {cms_stylesheet name="mycss"}, depending on the context.

I've noticed that variables defined in smarty within a stylesheet have a local scope.

I.e. if I load stylesheet #1 and #2, and if I've defined
[[assign var='red' value='#900']] in #1
then [[$red]] isn't defined in stylesheet #2

- Is my assumption correct about the local scope?
- I could most probably intuitively bypass this by defining these variables as global smarty variables in my template, then access them in the CSS. Is there a way to avoid that? Maybe to include a CSS that simply defines smarty variables within another CSS?

Thank you for your help and ideas and have a great day.

Best regards,

JS

[calguy1000]

smarty variables in CSS have scope for each call of {cms_stylesheet} so:

1:
{cms_stylesheet} {* no parameters *}
grabs all the stylesheets (in order) attached to the template, and passes them through smarty....

Variables defined at the top of the first stylesheet should be available for all of them

2:
{cms_stylesheet name='foo'}
{cms_stylesheet name='bar'}
variables declared in the 'foo' stylesheet probably won't be available in the second one.

3:
{cms_stylesheet} caches files in the tmp/cache directory and does not regenerate them on each request. so given scenario 2 above, if you changed the 'foo' stylesheet only it would be regenerated, not both.

4:
DO NOT declare smarty variables in your page template and expect them to work properly in the stylesheets... as they are generated, stored and cached.

5:
The best way to share smarty variables between stylesheets is to:
a: define your colors and smarty variables in a GCB.
i.e: {assign var='red' value='#f00'}
b: use the GCB and the variables in each stylesheet. i.e:
[[global_content name='mycolors']]
.warning {
color: [[red]];
}

[Rolf]

http://docs.cmsmadesimple.org/tags/core ... lor-scheme

[jsmonzani]

Thank you both for your answers!

calguy, as usual, you're faster than light
The GCB will indeed be a good solution.

I also thought that each call to cms_stylesheet would be independent.

Actually, you might wonder why I simply don't do a {cms_stylesheet} and attach my stylesheets to the template. That's because I need to feed IE pre-9 with alternates CSS and I thus do it in the template with conditional comments.

Code: Select all

<!--[if lte IE 8]>        
{cms_stylesheet name='2013common'}
{cms_stylesheet name='2013ieold}
<![endif]-->

<!--[if gt IE 8]><!-->
{cms_stylesheet name='2013common'}
{cms_stylesheet name='2013mobile'}
{cms_stylesheet name='2013desktop'}
{cms_stylesheet name='2013tablet'}
<!--<![endif]--

I don't know if a better solution exists. Unfortunately, I can't obviously insert these HTML comments in the CSS files...

Thanks again