CODEWITHSUNDEEP
sass
Kenny Bones
Kenny Bones

Reputation: 5129

Sass - Assign variable with another variable

I have this variable:

$color_pr1: #d6ad3f;

Now, I'm using Gumby and it uses it's own settings sheet where the following is set:

$header-font-color: #55636b !default;

Is it possible to use $color_pr1 instead? Like this?

$header-font-color: $color_pr1; ?

If now, am I thinking about this all wrong? I'd like to have my own set of colors etc and reuse those within my project.

Upvotes: 13

Views: 15660

Answers (3)

Federica Oltolina
Federica Oltolina

Reputation: 21

You can define a map:

From the Sass Documentation

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.

SCSSSassCSS
SCSS SYNTAX
@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

Upvotes: 2

Grzegorz Fijołek
Grzegorz Fijołek

Reputation: 21

Use css calc() function:

$header-font-color: calc(#{$color_pr1});

Upvotes: 2

cimmanon
cimmanon

Reputation: 68309

From the docs: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

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.

For example:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

is compiled to:

#main {
  content: "First content";
  new-content: "First time reference"; }

Variables with null values are treated as unassigned by !default:

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

is compiled to:

#main {
  content: "Non-null content"; }

Upvotes: 11

Related Questions