Html Angular CLI组件和指令CSS/SASS属性和变量

我正在做一个Angular 6项目，遇到了一个我不知道如何解决的情况。我正在编写一系列组件和指令，并将SCS用于包含变量的样式，以控制布局和主题

我试图实现的是，我希望将所有样式保留在SCSS文件中，但在我的一些指令中，使用边沟设置而不是填充/边距更有意义，因此我尝试构建我的组件，以计算它们自己的边距和填充。问题是我如何定义一个可能类似于他们定义：：ng deep的css属性，或者可能定义一个css变量来保存该值？或者用另一种方法在一个文件中定义所有布局和主题变量

我想到的实现这一点的唯一方法是创建一个.json配置文件来保存主题和其他变量，然后将其导出/导入到SCSS变量文件中，然后正常使用。然后我可以将相同的文件导入到我的角度组件和指令中，以使用变量。我正试图避免像只使用边距和设置为排水沟这样的事情，我希望尽可能保持这篇文章的整洁和可读性

可能是这样的：

layout.json layout.scss layout.directive.ts

---

这是基本的想法，不仅仅是排水沟，这是我唯一能想到的简单表达我的问题和可能的解决方案的方式。这似乎是额外的工作分配，有没有更好的方法来处理这个问题？

看起来有一个简单的方法来处理这个问题，如果在body标记中声明了CSS变量，您可以使用getComputedStyle以角度检索这个变量值。这样，您就不必创建任何.json配置文件。你需要做的就是在一个映射中定义你的变量，这样它们就可以作为CSS变量导出到body或其他标签中，然后在Angular中读取这些变量。下面是一个如何实现这一点的示例

_变量.scss layout.directive.ts

---

问：你能解释一下在什么情况下需要这样做吗？@Roy一种情况就像上面的例子一样。基本上，在SCS和Angular之间共享变量/设置的任何时候。

{
   appGutter: 50px, 
   appFontSize: 1em,
   (…)
}

@import 'layout.json'

// convert layout.json to SCSS variables 

app-root{
   font-size: $appFontSize;
} 

@Directive({
  selector: '[pmnAppLayout]',
})
export class PmnAppLayoutDirective implements (…) {
   @HostBinding('style.margin') margin: string;

   (…)

   private _updateLayout() {
      /* Get value from json config file */
      var number = jsonCfg.appGutter;

    this.margin = `${gutter / 2}px`;
  }
}

/*** Export SCSS variables to CSS ***/
@mixin PmnExportVariables($map, $prefix: null) {
  $mapPrefix: "--#{$prefix}";

  @if ($prefix){
    $mapPrefix: "#{$mapPrefix}-";
  }

  body {
    @each $name, $value in $map {
      #{$mapPrefix}#{$name}: $value;
    }
  }
}

$pmnLayout: ( 
   appGutter: 50px, 
   appFontSize: 1em,
);

@include PmnExportVariables($pmnLayout);

// To use the variable there are two options map-get and var()
app-root{
   font-size: map-get($pmnLayout, '--appFontSize');
   // font-size: var(--appFontSize);
}

@Directive({
  selector: '[pmnAppLayout]',
})
export class PmnAppLayoutDirective implements (…) {
   @HostBinding('style.margin') margin: string;

   (…)

   private _updateLayout() {
      // Get values from the body and convert to style
      let bodyStyles = window.getComputedStyle(document.body);

      /* Get the value*/
      var tVal = bodyStyles.getPropertyValue("--appGutter");

      this.margin = `${tVal / 2}px`;
  }
}