Angular-CLI：如何将 SCSS 变量导入 JavaScript答案

【问题标题】：Angular-CLI: How to import SCSS variables into JavaScriptAngular-CLI：如何将 SCSS 变量导入 JavaScript
【发布时间】：2016-12-05 17:05:58
【问题描述】：

我正在编写一个 Angular 2 组件来创建自定义网格布局。 SCSS 变量位于名为_variables.scss 的SCSS 文件中。我想在 JavaScript 中访问这些变量。我注意到一些 npm 工具，例如 scss_to_json，但不知道如何在 Angular2 项目中实现它。

$tile-margin: 20px;
$tile-width: 200px;
$tile-height: 250px;

【问题讨论】：

标签： angular sass angular-cli

【解决方案1】：

编写一个使用Http.get 加载原始scss 文件的服务非常容易，然后通过匹配变量定义的正则表达式传递结果，但是...

但老实说，我认为你找错了树，需要重新考虑设计。如果您已经编译好 scss 变量（以及使用它们的 CSS 类）并在客户端中可用，为什么还要手动应用样式？

为什么您不能定义自己的 CSS 类来映射到您的网格系统，然后设置到主机元素 class 的绑定以绑定它们？有点难看，因为ngClass 是一个指令，所以不能绑定到宿主元素上，但它是可行的。

以bootstrapcol-<sw>-<colspan>格式为例：

 export type ScreenWidth = 'xs' | 'sm' | 'md' | 'lg';

 @Directive({
   selector: `div[gridColumn]`,
   host: {
     '[attr.class]': 'hostClasses.join(' ')'
   },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GridColumn {
   @Input('gridColumn') screenWidth: ScreenWidth = 'md';
   @Input() colSpan: number = 1;

   constructor(private _host: ElementRef) {}

   get hostClasses(): Array<string> {
     let existingClasses = this._host.nativeElement.classList
            .filter(cls => !/^col-/.test(cls)
     return [
        ...existingClasses,
        `col-${this.screenWidth}-${colSpan}`
     ];
   }
 }

然后用法是：

 <div gridColumn="xs" [colSpan]="4"></div>

老实说，这与<div class="col-xs-4"></div> 的可读性差不多，那何必呢？

【讨论】：

感谢您的评论。我正在使用一个非常非标准的网格。并非所有图块都是 1x1，因此我添加 CSS 类（例如 left-2 和 top-3）以应用于图块元素，以最适合的顺序排列它们。如果我决定更改平铺宽度或边距宽度，我不想将代码放在多个位置。
另请注意，原始 SCSS 文件也由 WebPack 打包
啊，我明白了。不过，我仍然需要定义自己的 SCSS 类并使用指令将它们动态绑定到主机。然后，您不仅可以将所有代码放在一个地方，而且还可以将所有样式放在样式表中，它们所属的位置。此外，您还可以将现有的媒体查询应用于它们，这在定义网格时总是有用的。