Using SASS Map Function Instead of Variable Interpolation

Sass Interpolation of Mixin, Function, and Variable names

Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.

As of Sass 3.3, you can use mappings for this purpose for variables:

$dialogs:
    ( error:
        ( light: red
        , dark: darken(red, 10%)
        )
    , success:
        ( light: green
        , dark: darken(green, 10%)
        )
    );

@each $name, $colors in $dialogs {
  .#{$name} {
      color: map-get($colors, dark);
  }
}

And for functions:

@function green() {
  @return lighten(green, 10%);
}

@function red() {
  @return lighten(red, 10%);
}

@mixin my-bg($function-name) {
  background: call($function-name);
}

.foo {
  @include my-bg('red');
}

Workaround for Sass variable interpolation in nested loop?

You can't use dynamic variable name in SCSS for now but you could use list as shown below.

//Color chords
$chord: (
  (color1:orange,  color2: magenta, color3: gray, color4: yellow)
  (color1:magenta, color2: blue,    color3: gray, color4: orange)
);

@for $c from 1 through length($chord) {
    $subList: nth($chord, $c);
    #chord#{$c} {
        @for $i from 1 through length( $subList ) {
            .color#{$i} {
                $c1: map-get( $subList, color#{$i});
                fill: $c1;
                color: $c1;
            }
        }

    }
}

Is it possible to reference a variable with an interpolated string?

Well, the closest I could get to what I wanted was:

#_variables.scss
/* Categories */
$family_wellness_color: #c1d72e;
$lifestyle_color: #f4eb97;
$food_color: #f78f1e;
$media_entertainment_color: #db3535;
$travel_recreation_color: #e30e61;
$education_color: #92278f;
$sports_color: #0070bb;
$technology_color: #00b5cc;
$products_shopping_color: #028e99;
$companies_businesses_color: #56BA42;

#_mixins.scss
@import 'variables';

@mixin get_category_bkgd_color($category_name)
{
    @if $category_name == family_wellness
    {
        @include bkgd_color($family_wellness_color);
    }
    @else if $category_name == lifestyle
    {
        @include bkgd_color($lifestyle_color);
    }
    @else if $category_name == food
    {
        @include bkgd_color($food_color);
    }
    @else if $category_name == media_entertainment
    {
        @include bkgd_color($media_entertainment_color);
    }
    @else if $category_name == travel_recreation
    {
        @include bkgd_color($travel_recreation_color);
    }
    @else if $category_name == education
    {
        @include bkgd_color($education_color);
    }
    @else if $category_name == sports
    {
        @include bkgd_color($sports_color);
    }
    @else if $category_name == technology
    {
        @include bkgd_color($technology_color);
    }
    @else if $category_name == products_shopping
    {
        @include bkgd_color($products_shopping_color);
    }
    @else if $category_name == companies_businesses
    {
        @include bkgd_color($companies_businesses_color);
    }
}

#dashboard.scss
@import 'variables', 'mixins';

@each $cat in family_wellness, lifestyle, food, media_entertainment, travel_recreation, education, sports, technology, products_shopping, companies_businesses
{
    .#{$cat}
    {
        .swatch, .bar
        {
            @include get_category_bkgd_color($cat);
        }
    }
}

Not the most elegant solution, but it does get me a mixin I can re-use in several other areas. Does anyone see a way to make this more efficient?

Sass variable interpolation with backslash in output

You can add the backslash to the parameter in the $icons variable. That is,

$icons: wifi "\600", wifi-hotspot "\601", weather "\602";

@each $icon in $icons {
  .icon-#{nth($icon, 1)}, %icon-#{nth($icon, 1)} {
    content: "#{nth($icon, 2)}";
  }
}

Generated CSS:

.icon-wifi {
  content: "\600"; 
}

.icon-wifi-hotspot {
  content: "\601"; 
}

.icon-weather {
  content: "\602"; 
}   

SASS Interpolation within loop converting increment to string

Remove the #{} within the "color($color-white, #{$i / 10});" . It's not needed at that point since you're not outputting that value to a native CSS function. I'd also suggest using sassmeister.com for quick Sass debugging.

Assumptions in this answer:

• The Color function is your custom sass function which uses Sass's RGBA function.

Sass loops and variables

Probably a little bit late, but the following should do the trick!

/**
 * Chord Color Mixin
 * 
 * @access public
 *
 * @requires {List} $colors - Space Deliminated list of Colors
 *
 */
@mixin chord-color($colors) {
    $i: 0;
    @each $color in $colors {
        $i: $i + 1;
        .color#{$i} {
            color: $color;
            fill: $color;
        }
    }
}

/**
 * Chord1
 */
#chord1 {
    @include chord-color(blue purple #eee teal green gray);
}

/**
 * Chord2
 */
#chord2 {
    @include chord-color(orange magenta gray yellow green gray);
}

/**
 * Chord3
 */
#chord3 {
    @include chord-color(green blue gray blue green gray);
}

The Colors passed in the @include will be added in their relevant order. Adding a new color to the end will create a .color7 for the current #chord.

The list is ordered as it will be compiled, from left to right.

---

Related Topics