Geek Answers Handbook

Provide sass variable definitions on command line

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

Update: It seems this may not be enough. The @if syntax does not actually allow sass conditional blocks, but only CSS conditional blocks. This means that even if I can define a variable, it will not allow me to perform other processing on the file. Any ideas?

+1
source share
3 answers

The object I need is simply not in SASS. Even if you can define variables on the command line, the if object is not enough to execute conditional blocks in the stylesheet.

Instead, I resorted to an old M4 backup. I just process SASS with M4, executing command line options and complete conditional blocks.

0
source

Use custom SASS functions . The following is a complete working example.

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 can put module Sass::Script::Functions directly in config.rb and compile the styles with:

 SASS_VAR_PRIMARY_COLOR='#123456' sass --compass styles.sass styles.css
+5
source

I am sure I understand what you are saying. Sometimes it's nice to group things together in a .scss file that ends in conditional style sheets so you can find them easier.

There is currently no way to compile a sass stylesheet to split style sheets without grouping all of your conditional rules into partial ones.

However, using the Paul Irish clause, conditionally add the 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 can do something like this:

 .something { regular rules... .ie8 & { conditional rules... } }

That way you can still have an organization as well as a conditional style. Hope this helps!

-1
source

More articles:


All Articles