a method to overwrite cssVariables

[elvir...@gmail.com]

Hi guys,

I have a question regarding the processor "cssVariables"

Is there a method to define variables more than once? So that the cssVariables owerwrite themselves whenever a new declaration is found...

I want to implement a css-theme-generator and I want to use cssVariables on the website. So, initially I want the variables to have default values but when there is a theme definition, I want the variables to be overwritten.

At the current state (as I am aware of), I can only ommit initial values which leads to css code not being valid (w3c) if there is no theme definition.

Explanation:

html:

... <div class=theme-background-color>...

css:

.theme-background-color {

   background-color: var(theme-background-color);

}

theme css (if any):

@variables {

   theme-background-color: #000000;

}

Best regards,

elvirus

[Alex Objelean]

Hi Elvirus,

the way it works now, the CssVariablesProcessors uses a map which extract the variables declaration from the processed resource and replaces the entire content with the latest variable declaration (if there are more than one variable definition). For your case, that would mean that theme variable would take over default variable declaration. The scope of variable definition is the scope of the resource if the CssVariablesProcessor is used as a post processor, or the entire content if it is used as a post processor.

In order to make it possible to override variables, as described for your use-case, the following change should be performed on CssVariablesProcessor: it should reduce the scope of the content where variables are replaced, using only the content following the variable replacement. I'm not yet sure whether this should be the default behavior or should we create another processor which would work this way. 

Could you open an issue (feature request), with description of this requirement? 

It would be a nice addition.

Cheers,

Alex

--
You received this message because you are subscribed to the Google Groups "wro4j" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wro4j+un...@googlegroups.com.
To post to this group, send email to wr...@googlegroups.com.
Visit this group at http://groups.google.com/group/wro4j.
For more options, visit https://groups.google.com/d/optout.

[Alex Objelean]

Errata (there previous message has an error, fixed below):

 For your case, that would mean that theme variable would take over default variable declaration. The scope of variable definition is the scope of the resource if the CssVariablesProcessor is used as a pre processor, or the entire content if it is used as a post processor.

[elvir...@gmail.com]

Hi Alex,

thank you for your response.

I found that SASS has a feature which could work for me. It's a function called "variable-exists" but I cannot get it to work.

My code is like this:

test.css:

$testVar: #000;

@if variable-exists(testVar) {

  .body {

    background-color: $testVar;

  }

}

The problem is, when I delete the declaration of testVar, I get an error "Undefined variable "$testVar""

Here is the docs: http://sass-lang.com/documentation/Sass/Script/Functions.html#variable_exists-instance_method

Do you know how I could use that function? Am I doing something wrong?

Best regards,

elvirus

[Alex Objelean]

Hi Elvirus,

I assume you are using rubySassCss processor. 

I was managed to reproduce the problem. The good news is that there is a workaround: update the sass version as described here. 

I have started to work on the fix on a feature branch.

Until the new release is available, you can upgrade the sass gems dependencies in your project and make it work.

Cheers,

Alex

[elvir...@gmail.com]

Hi Alex,

you're so awesome! Thank you, with this dependency, the call to the function "variable-exists" acutally works. I would appreciate a fix in a future release!

Thank you so much.

Regards,

elvirus