59

AS the title says I am trying to check whether a variable is defined in SASS. (I am using compass if that makes any different difference)

I've found the Ruby equivalent which is:

defined? foo

Gave that a shot in the dark but it just gave me the error:

defined": expected "{", was "?

I've found a work around (which is obviously just to define the variable in all cases, which in this case it actually makes more sense) but I'd really like to know if this is possible for the future

locrizak
  • 12,192
  • 12
  • 60
  • 80
  • what exactly are you trying to achieve? Compass drop error messages when a var in sass is not defined. – Rito Dec 15 '11 at 10:43
  • I have a cms with x amount of themes. All of the common scss files are in a default build path and then in each theme they have a file that controls all of the colors with variables. Ideally id like to make it so that putting some of the variables are optional. Therefore I need to be able to check if a variable is defined – locrizak Dec 15 '11 at 14:15
  • aah now I get it, thanks. What about pre-defining your optional vars with a default value (or no value) and redefine it in your themes where a change is needed? – Rito Dec 15 '11 at 14:35
  • damm didn't think of that. GREAT idea and will probably implement that.. still curious about checking existence of a variable though – locrizak Dec 15 '11 at 15:22

3 Answers3

124

For Sass 3.3 and later

As of Sass 3.3 there is a variable-exists() function. From the changelog:

  • It is now possible to determine the existence of different Sass constructs using these new functions:
    • variable-exists($name) checks if a variable resolves in the current scope.
    • global-variable-exists($name) checks if a global variable of the given name exists. ...

Example usage:

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}

For Sass 3.2.x and earlier (my original answer)

I ran into the same problem today: trying to check if a variable is set, and if so adding a style, using a mixin, etc.

After reading that an isset() function isn't going to be added to sass, I found a simple workaround using the !default keyword:

@mixin my_mixin() {
  // Set the variable to false only if it's not already set.
  $base-color: false !default;

  // Check the guaranteed-existing variable. If it didn't exist 
  // before calling this mixin/function/whatever, this will 
  // return false.
  @if $base-color {
     color: $base-color;
  }
}

If false is a valid value for your variable, you can use:

@mixin my_mixin() {
  $base-color: null !default;

  @if $base-color != null {
     color: $base-color;
  }
}
Mark Amery
  • 143,130
  • 81
  • 406
  • 459
RobW
  • 10,184
  • 4
  • 41
  • 40
  • Thanks! This was educational – iono Dec 03 '12 at 07:12
  • 1
    This throws an error "Syntax error: Mixin my_mixin takes 0 arguments but 1 was passed" on SASS 3.2.12, when you try to pass an argument. – hamahama Nov 12 '13 at 04:30
  • You need to define arguments then :). `@mixin my_mixin($my_arg) {}`. See the Sass docs for a full explanation. – RobW Nov 15 '13 at 20:31
  • 17
    Note that the variable parameter should not use `$`. So `@if variable-exists(my-variable)` not `@if variable-exists($my-variable)`. This tripped me up at first, figured it would be helpful to others who find this answer. – kmgdev Jan 25 '17 at 03:37
  • @if not variable-exists(none_some_variable) will fix – Serkan KONAKCI Aug 15 '20 at 12:03
  • Wow! This makes it so much easier to manage themes! Thanks! – Oliver Zhang Nov 26 '21 at 02:11
6

If you're looking for the inverse, it's

@if not variable-exists(varname)

To check if it is undefined or falsy:

@if not variable-exists(varname) or not $varname

And if you want to set it only if it's undefined or null

$varname: VALUE !default;
Dirigible
  • 1,749
  • 16
  • 11
4

Just as a complementary answer - you should have a look on the default keyword for certain use cases. It gives you the possibility to assign a default value to variables in case they are not defined yet.

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

Example:

In specific-variables.scss you have:

$brand: "My Awesome Brand";

In default-variables.scss you have:

$brand: company-name !default;
$brand-color: #0074BE !default;

Your project is built like this:

@import "specific-variables.scss"; @import "default-variables.scss"; @import "style.scss";

The value of brand will be My Awesome Brand and the value of brand color will be #0074BE.

Blackbam
  • 17,496
  • 26
  • 97
  • 150