Fixing unordered_map::at error in gulp-sass

Encountering the following error when using gulp-sass?:

Sass error: { status: 3,
  message: 'unordered_map::at: key not found',
  code: 3 }

Sass error: { status: 3,

message: 'unordered_map::at: key not found',

code: 3 }

Here’s how to fix this:

The problem

Chances are you are using SASS maps where your keys are not strings:

// This:
$colors: (
  red   : #f00;
  green : #0f0;
  blue  : #00f;
);

// and/or this:
p {
  color: map-get($colors, red);
}

// This:

$colors: (

red : #f00;

green : #0f0;

blue : #00f;

);

// and/or this:

p {

color: map-get($colors, red);

}

The fix is really simple, just wrap them names in quotes:

// This:
$colors: (
  'red'   : #f00;
  'green' : #0f0;
  'blue'  : #00f;
);

// and/or this:
p {
  color: map-get($colors, 'red');
}

// This:

$colors: (

'red' : #f00;

'green' : #0f0;

'blue' : #00f;

);

// and/or this:

p {

color: map-get($colors, 'red');

}

Problem solved!

Visitors give this article an average rating of 5.0 out of 5.

★ ★ ★ ★ ★