11

Is it possible to set a sass variable at compile time? I basically want to do this:


$color: red !default;
div#head {

  background-color: $color;

}

When I compile to css I want to set $color to "blue" (preferably from the command line). Has anyone been able to do this?

Thanks, Chris

Kenzic
  • 525
  • 5
  • 15
  • I'm not quite sure I understand your question, you want to set this variable in the command line? Kind of like `sass --style compressed --watch scss:css --vars $color=blue;` `<- this line won't work, I just made it up to illustrate my question` – Jannis Apr 08 '11 at 20:57
  • Yes, that is exactly what I would like to do! – Kenzic Apr 08 '11 at 23:22
  • 1
    In that case I don't think it's possible right now. Sorry I couldn't be of more help. The only thing I can imagine you could do is create a custom bash/ruby script that adds a variable to a file then compiles a stack of scss files to css I think. – Jannis Apr 09 '11 at 06:19
  • I had a similar question and came up with my own solution: [Command-line argument as var in Sass, for hardcoded CDN URL's on compile](http://stackoverflow.com/a/31406151/2563782) – Dennis Burger Jul 14 '15 at 12:18

2 Answers2

6

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.

Caio Cunha
  • 23,326
  • 6
  • 78
  • 74
6

An alternate of command line options is to create other files assigning values to variables.

Assume that your code above is in a file named 'style.scss'. To set $color to "blue", create a file such as:

$color: blue;
@import "style";

and name it to 'blue.scss' for example. Then compile it with below.

sass blue.scss:style.css

When you want to assign another value to the variable, make another file named "green.scss" like:

$color: green;
@import "style";

Then compile it with

sass green.scss:anotherstyle.css

It is bothering somewhat but enables to decide values of variables at compile time.

reppets
  • 61
  • 1
  • 4
  • 1
    Don't really think that will work. My example simple for demonstration purposes, but I would want to set multiple variables. – Kenzic Mar 07 '12 at 21:12
  • 1
    Of course you can put multiple variables in a importing file. Did you mean you need to generate individual files with lots of combination of values like {var1:val1A, var2:val2A, ...} to fileA.css, {var1:val1B, var2:val2B, ...} to fileB.css, fileC.css fileD.css ...? If so, too bad my answer can't be help. But it's still useful when you want to generate css files that has few differences each other from one scss file. E.g. Most css styles are shared and some tweaks are needed to adapt the styles to variation of devices such as PC/tablet/smartphone. It needs only 3 files to define a set of vars. – reppets Mar 08 '12 at 15:47
  • Or if you mean you want to try many adhoc values, edit the importing file and run sass with --watch option would be help. – reppets Mar 08 '12 at 15:48