Checking If a Variable Is Defined in Sass

Checking if a variable is defined in SASS

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;
  }
}

How to check undefined variable in sass

I figured the issue. Its giving undefined coz i was defining @if variable-exists($my-variable) not @if variable-exists(my-variable) .. Since only string is being considered as param in @if condition., and using @, It is converting the entire variable including @ and getting var undefined.

Hence answer is @if variable-exists(my-variable)

Another interesting I have found is, the variable we are defining should not be any standard color code value. If defined any standard colorcode, SASS automatically throws an error 'param should be a string'... 'standard color code cannot be considered as srting'...

e.g. @gray: #ccc ., on passing gray as a variable name, SASS throws an error saying 'it is expecting string'.

Thought this additional input might help few people.

Sass check if variable is passed to mixin

Your mixin would work if you modify it a tiny bit (as you actually need to pass the parameter in question to the @if directive. And you would want to default the parameter to null or false, which would mean that nothing was passed).

@mixin test($p: null) {
    @if ($p) {
        /* Do something if $p was passed */
    } @else {
        /* Do something if $p was not passed */
    }
}

DEMO

If you want to set a different value as the default, then you just need to check for that specific value in the if statement (e.g. "do something if $p is set to the default value"). Here how you would do this by setting the default from a variable, like you do in your example. However, this will not differentiate between "no argument passed" and "passed value equals default value".

@mixin test($p: $default) {
    @if ($p == $default) {
      /* Do something if $p is set to $default */
    } @else {
      /* Do something else if $p is not $default */
    }
}

DEMO

But of corse you can combine both approaches ... check if something is passed to $p (to do different things if passed or not), and if nothing is passed set $p's value to default.

@mixin test($p: null) {
    @if ($p) {
      /* Do something if argument passed */
    } @else {
      /* Do something else if no argument passed. Set $p to default. */
      $p: $default;
    }
}

DEMO

This should now work for everything but the boolean value of false, as null and false both validate to false with the @if directive. So to allow passing false as an argument value you would need to use a more specific expression. For example:

...
    @if ($p != null) {
...

DEMO

And voilà, this should do the trick - unless you, for some reason, want to pass null as an argument. Then you need to use something else as the default, like a string that is extremely unlikely to be passed as an argument, e.g. "no arguments have been passed" =)

DEMO

Is there a way to understand if a SASS variable is a valid color?

There is a built-in method in SASS (type-of()) that might help to check if the current existing color is actually is a color or not, so you can check it like this:

@function get-valid-color($color) {
  @if type-of($color) != color {
    @return inherit;
  } @else {
    @return $color;
  }
}

Sass - Check which kind of value a variable has

From the Sass documentation:

type_of($value)

Returns the type of a value.

Examples:

type-of(100px)  => number
type-of(asdf)   => string
type-of("asdf") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(blue)   => color

http://sass-lang.com/documentation/Sass/Script/Functions.html#type_of-instance_method

(note that - and _ is interchangeable in Sass functions).

Checking if a variable is included in a list of words in SCSS

So far there is no built-in method to achieve that. However you could simply write your own @function (for instance called in_list¹) which uses index() method in order to check the existence of a value in a list as follows:

/**
 * in_list — Checks if a value exists in a list
 *
 * @param  $value the needle
 * @param  $list  the haystack
 * @return boolen TRUE if $value is found in the $list, FALSE otherwise.   
 */
@function in_list($value, $list) {
    @return (false != index($list, $value));
}

For instance:

$list: foo, bar, baz;
$val: qux;

 ...
@if in_list($val, $list) {
    // do something
} @else {
    @error "$val argument must exist in #{$list}; was '#{$val}'";
}

---

^{1. The function name and the syntax is inspired of PHP in_array() function.}

---

Related Topics