Пользовательские Scss для фондов для электронной почты без импорта - PullRequest
Новая
       21

Пользовательские Scss для фондов для электронной почты без импорта

0 голосов
/ 13 февраля 2019

Я новичок в Sass и прочитал много документации, но, похоже, не могу переопределить файл настроек с помощью некоторых пользовательских scss.Мне нужно множество кнопок и цветов, поэтому я создал файл _global.scss для создания новых переменных.Я импортировал это в app.scss.

Я получаю эту ошибку при попытке запустить сборку npm: 

Error in plugin 'sass'
Message:
    src/assets/scss/_global.scss
Error: Invalid CSS after "$hollow-margin": expected 1 selector or at-rule, was ": 0 0 $global-margi"
        on line 23 of src/assets/scss/_global.scss
>> $hollow-margin: 0 0 $global-margin 0;
   ^

Вот файл app.scss: 

@import 'global';
@import 'settings';
@import 'foundation-emails';

@import 'template/template';

Вот файл _global.scss: 

// New colors
$featured-color: #ED145B;


// 1. Hollow  Black Button
// ---------
$hollow-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$hollow-font-size: (
  tiny: 10px,
  small: 13px,
  default: 14px,
  large: 20px,
);

$hollow-color: $black;
$hollow-color-alt: $medium-gray
$hollow-background: $white;
$hollow-border: 2px solid $black;
$hollow-radius: $global-radius;
$hollow-rounded: $global-rounded;

// 1. Transparent Button
// ---------
$transparent-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$transparent-font-size: (
  tiny: 10px,
  small: 12px,
  default: 14px,
  large: 20px,
);

$transparent-color: $white;
$transparent-color-alt: $medium-gray
$transparent-background: none;
$transparent-border: 2px solid $white;
$transparent-radius: 2px;
$transparent-rounded: $global-rounded;

// 3. rounded grey Button
// ---------
$rounded-padding: (
  tiny: 4px 8px 4px 8px,
  small: 5px 10px 5px 10px,
  default: 8px 18px 8px 18px,
  large: 10px 20px 10px 20px,
);
$rounded-font-size: (
  tiny: 10px,
  small: 12px,
  default: 14px,
  large: 20px,
);

$rounded-color: #9B9B9B;
$rounded-color-alt: $light-gray
$rounded-background: #ED145B;
$rounded-border: 6px solid #ED145B;
$rounded-radius: $global-radius;
$rounded-rounded: $global-rounded;

1 Ответ

0 голосов
/ 13 февраля 2019

Я считаю, что рекомендуется изменить глобальные настройки CSS в файле /.../[project]/src/assets/_settings.scss для того, что вы пытаетесь сделать.Например, здесь я изменил значение $ primary_color на то, что я хотел использовать для электронной почты.

...