自定义 Scss 用于电子邮件不导入的基础

Question

我是 Sass 的新手，已经阅读了很多文档，但似乎无法用一些自定义 scss 覆盖设置文件。我需要各种按钮和颜色，所以我创建了一个 _global.scss 文件来创建新变量。我将它导入到 app.scss 中。

当我尝试运行 npm build 时出现此错误：

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;

Answer 1

我认为建议您修改 /.../[project]/src/assets/_settings.scss 文件中的全局 CSS 设置，以实现您想要执行的操作。例如，我将 $primary_color 的值更改为我希望用于电子邮件的值。