Provide sass variables definitions on command-line

Question

Is there a standard, or simple, way to define sass variables on the command line, or pass them from the environment? What I am doing is trying to create to different CSS files from a single SCSS source file. Each output file will be specialized for a certain target device and included from the HTML page with media queries.

Update: It looks like this may not be enough. The @if syntax doesn't actually allow conditional sass blocks, only conditional CSS blocks. This means even if I can define a variable it wouldn't allow me to do different processing in the file. Any ideas?

Outguard

What's wrong with having multiple SCSS files? You'll have to have multiple CSS files anyway if you're making one for each device you're targeting. Your edit makes no sense at all. – Klaraklarika

Related: github.com/sass/sass/issues/1692 – Aureole

Answer 1

The facility I needed is simply not in SASS. Even if you could define variables on the command-line the "if" facility is insufficient to actually do conditional blocks in the style sheet.

Instead I've resorted to the old stand-by of M4. I simply preprocess the SASS with M4, doing command-line options and full conditional blocks.

Outguard

Answer 2

Use SASS custom functions. A complete working example below.

styles.sass:

$primary_color: getenv("SASS_VAR_PRIMARY_COLOR", white)

body
    background: $primary_color  

sass_functions.rb:

module Sass::Script::Functions
    def getenv(name, default)
        assert_type name, :String
        value = ENV.fetch(name.value, nil)
        if not value
            return default
        end
        begin
            Sass::Script::Parser.parse(value, 0, 0)
        rescue
            Sass::Script::String.new(value)
        end
    end
end

Command line:

SASS_VAR_PRIMARY_COLOR='#123456' sass -r ./sass_functions.rb styles.sass styles.css

If you use Compass, you may put module Sass::Script::Functions directly into config.rb and compile the styles with:

SASS_VAR_PRIMARY_COLOR='#123456' sass --compass styles.sass styles.css

Peritoneum

Answer 3

I couldn’t find a way to specify sass variables from the command line but you can mimic this behaviour by creating multiple specialized SCSS files that import a base SCSS file.

For example:

// base_style.scss
@debug "* Format = #{$format} *";
@if $format == 1
{
  $body-font-family: "Palatino" !global;
}
@else if $format == 2
{
  $body-font-family: "Arial" !global;
}
@else
{
  @warn "Undefined format";
}
body
{
  font-family: $body-font-family;
}

// style_1.scss
$format: 1;
@import "base_style.scss";

// style_2.scss
$format: 2;
@import "base_style.scss";

Then from the command line:

sass style_1.scss style_1.css
sass style_2.scss style_2.css

Note that you can also specify the rules for different target media in one single (S)CSS file with distinct media queries in it. In this case, you only need one source file.

Gath

Answer 4

In Windows I ended chaining two commands. First command is Powershell and all it does is find and replace specific strings in the SCSS file. Just value of variables defined at the top of the SCSS file. Then second command is the SASS command to compile the CSS. That way I maintain one SCSS file for different clients in my case.

Lanyard

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Platoon

Answer 5

I'm pretty sure I understand what you're saying. Sometimes it's good to group things together in a .scss file that would end up in conditional stylesheets so you can find them easier.

At the moment there's still not the ability to compile a sass stylesheet in to separate stylesheets without grouping all your conditional rules in to a partial.

However, using Paul Irish's suggestion to conditionally add a class name to the html tag: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

You could do something like this:

.something {
    regular rules...

    .ie8 & {
         conditional rules...
    }
}

That way you can still have organization as well as conditional styling. I hope this helps!

Wilmington