Sass: Set Variable at Compile Time

SASS: Set variable at compile time

I found this at their FAQ http://sass-lang.com/docs/yardoc/file.FAQ.html

If you just want to pass some variables to the CSS every time it gets compiled, like using --watch, you can use Sass functions to define Ruby scripts to even query a database. But the code is going to be compiled only once, and served statically.

But if you need to recompile it at every request with different options,

you can use Sass::Engine to render the code, using the :custom option
to pass in data that can be accessed from your Sass functions

Seems like it's not recommended, though. Probably for performance reasons.

Compiling Sass with custom variables per request under Rails 3.1

Sim.

It is possible. Look here SASS: Set variable at compile time

I wrote a solution to address it, I'll post soon and push it here, in case you or someone else still need it.

Set a variable in Sass depending on the selector

I think a mixin is the answer. (As I wrote, variables won’t work.)

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

That SCSS compiles to this CSS:

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

If you wanted to group the color values together in your SCSS file, you could use variables in conjunction with the mixin:

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}

use css variable to generate class names in scss

is it possible to generate class names by css variables?

Short answer:

No.

Longer answer:

CSS custom properties, also commonly called CSS variables, are known at runtime, while SASS variables are known at compile time. Since browsers can't understand SASS, it first needs to be compiled down to CSS and by that time, the SASS compiler won't know what the value of the CSS variable will be, so it throws a compile error.

Possible solution

Dynamically generate CSS based on your input and add it to the DOM.

---

Related Topics