如何在 gulp-sass 中编译地图数组？

Question

我正在尝试编译包含地图数组的 .scss 文件，但在 gulp-sass 中出现错误。如何在 scss 文件中编译数组？

这是我使用 Redux Framework 开发的新 WordPress 主题。我尝试在主题中实现调色板，并为一个调色板编写了许多类。所以我想用 SASS 做一些自动化。

$violet: ( 
  first   : #ffffff,
  second  : #171717,
  third   : #fdec00,
  fourth  : #400061,
  fifth   : #fff88f,
  sixth   : #ffd600,
  seventh : #121212
);

@each $class, $color in $violet {
  .violet_#{$class}_bg {
    background-color: $color;
  }
}

我在 gul-sass 中有一个错误^

Error: (first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn't a valid CSS value.
        on line 23 of sass/theme/_theme_variables.scss
        from line 11 of sass/theme.scss
>> $violet: ( 

   ---------^

    at options.error (/home/yegor/lampstack-7.1.25-0/apache2/htdocs/akimovdesign/wp-content/themes/understrap/node_modules/node-sass/lib/index.js:291:26)
  status: 1,
  file:
   '/home/yegor/lampstack-7.1.25-0/apache2/htdocs/akimovdesign/wp-content/themes/understrap/sass/theme/_theme_variables.scss',
  line: 23,
  column: 10,
  message:
   'sass/theme/_theme_variables.scss\nError: (first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn\'t a valid CSS value.\n        on line 23 of sass/theme/_theme_variables.scss\n        from line 11 of sass/theme.scss\n>> $violet: ( \n\n   ---------^\n',
  formatted:
   'Error: (first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn\'t a valid CSS value.\n        on line 23 of sass/theme/_theme_variables.scss\n        from line 11 of sass/theme.scss\n>> $violet: ( \n\n   ---------^\n',
  messageFormatted:
   '\u001b[4msass/theme/_theme_variables.scss\u001b[24m\nError: (first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn\'t a valid CSS value.\n        on line 23 of sass/theme/_theme_variables.scss\n        from line 11 of sass/theme.scss\n>> $violet: ( \n\n   ---------^\n',
  messageOriginal:
   '(first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn\'t a valid CSS value.',
  relativePath: 'sass/theme/_theme_variables.scss',
  name: 'Error',
  stack:
   'Error: sass/theme/_theme_variables.scss\nError: (first: #ffffff, second: #171717, third: #fdec00, fourth: #400061, fifth: #fff88f, sixth: #ffd600, seventh: #121212) isn\'t a valid CSS value.\n        on line 23 of sass/theme/_theme_variables.scss\n        from line 11 of sass/theme.scss\n>> $violet: ( \n\n   ---------^\n\n    at options.error (/home/yegor/lampstack-7.1.25-0/apache2/htdocs/akimovdesign/wp-content/themes/understrap/node_modules/node-sass/lib/index.js:291:26)',
  __safety: undefined,
  _stack: undefined,
  plugin: 'gulp-sass',
  showProperties: true,
  showStack: false }

我期望输出：

.violet_first_bg {
  background-color: #ffffff;
}
.violet_second_bg {
  background-color: #171717;
}

and so on...

Answer 1

$bg: (
    primary     : $primary-colour,
    secondary   : $secondary-colour,
    lightgrey   : $lightgrey,   
    white       : $white,
    brown       : $brown,
);


@each $name, $value in $bg {
    .bg--colour_#{"" + $name} {
        background: $value;
    }
}

尝试以下方法，但当然要将变量更改为您的项目。让我知道结果。