Use Variables in Stylesheet

D_Lhasa · Post by **D_Lhasa** » Thu May 11, 2017 3:01 am

Hi! I'm looking to control a few styles via variables, so that they can easily be changed per target, without maintaining separate stylesheets for each target.

I am able to do this using inline CSS. So, the following will work:

Code: Select all

<span style="background-color:[%=General.ProductColor%]">Some demo content</span>

However, the following does not work:

Code: Select all

<!-- in the html -->
<span class="demo">Some demo content</span>

Code: Select all

/* in the CSS file */
.demo {
background-color:[%=General.ProductColor%];
}

I also tried:

Code: Select all

/* in the CSS file */
.demo {
background-color:"[%=General.ProductColor%]";
}

Is this simply something that can't be done in Flare? Or am I using the wrong syntax?

Edit to add:
Frustratingly, it ALMOST works when placing it between <style> tags in the <head> of the Masterpage.
This evaluates it correctly, but keeps the quote marks, leading to invalid CSS:

Code: Select all

		
<style>
 .demo {
    background-color: "[%=General.ProductColor%]";
 }
</style>

Whereas this results in invalid CSS because it apparently doesn't evaluate (inspect elements shows a blank/no value)

Code: Select all

<style>
 .demo {
  background-color: [%=General.ProductColor%];
 }
</style>

Post by **doc_guy** » Thu May 11, 2017 5:12 pm

I don't know of a way to do this in Flare, though I have tried several times, and it is not just a Flare-type request. There is a proposed solution in CSS3 that allows you to use variables (not Flare variables, but variables nonetheless) in CSS, but it isn't widely supported, and Chrome pulled support for it due to performance reasons. So, you are not alone in wanting the functionality, but I haven't seen anybody get it working yet.

MadCap Software Forums

Use Variables in Stylesheet

Use Variables in Stylesheet

Re: Use Variables in Stylesheet