Как скомпилировать массив карт в gulp-sass? - PullRequest
Новая
       29

Как скомпилировать массив карт в gulp-sass?

0 голосов
/ 26 марта 2019

Я пытаюсь скомпилировать файл .scss с массивом карт, но у меня ошибка в gulp-sass. Как я могу скомпилировать массив в файле scss?

Это для моей новой темы WordPress, которую я разрабатываю с Redux Framework. Я пытаюсь использовать цветовые палитры в теме и написал много классов для одной палитры. Поэтому я хочу сделать некоторую автоматизацию с помощью 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...

1 Ответ

0 голосов
/ 27 марта 2019 
$bg: (
    primary     : $primary-colour,
    secondary   : $secondary-colour,
    lightgrey   : $lightgrey,   
    white       : $white,
    brown       : $brown,
);


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

Попробуйте следующее, но, конечно, измените переменные в вашем проекте. Дайте мне знать результаты.

...