Угловой CLI компонент и директива CSS / SASS свойства и переменные - PullRequest
Новая
       28

Угловой CLI компонент и директива CSS / SASS свойства и переменные

0 голосов
/ 20 октября 2018

Я работаю над проектом Angular 6 и столкнулся с ситуацией, которую я не знаю, как решить.Я пишу серию компонентов и директив и использую SCSS для своих стилей, которые содержат переменные для управления макетом и темой.

Что я пытаюсь сделать, так это то, что я хотел бы сохранить всю стилизацию в файлах SCSS, но в некоторых моих директивах имеет гораздо больше смысла использовать настройку желоба вместо заполнения / поля, поэтому я пытаюсьструктурировать мои компоненты, чтобы рассчитать собственные поля и отступы.Проблема в том, как я могу определить свойство css "Gutter" (возможно, аналогичное тому, как они определяют :: ng-deep) или, возможно, переменную css для хранения значения?Или другой способ определить все переменные макета и темы в одном файле?

Единственный способ сделать это - создать файл конфигурации .json, содержащий тему и другие переменные, затем экспортировать / импортировать его в файл переменных SCSS, а затем использовать его как обычно.Затем я мог импортировать этот же файл в мои компоненты и директивы Angular, чтобы использовать переменные.Я стараюсь держаться подальше от таких вещей, как использование только поля и установка его в качестве желоба, я хотел бы сохранить его чистым и максимально читабельным.

может быть что-то вроде:

layout.json 

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

layout.scss 

@import 'layout.json'

// convert layout.json to SCSS variables 

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

layout.directive.ts 

@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`;
  }
}

Это основная идея, это намного больше, чем простожелоб, это был единственный способ, которым я мог придумать, просто передать мою проблему и возможное решение.Кажется, это требует дополнительной работы, есть ли лучший способ справиться с этим?

1 Ответ

0 голосов
/ 21 октября 2018

Похоже, что есть простой способ справиться с этим, если переменная CSS объявлена, скажем, в теге body, вы можете получить значение этой переменной в Angular, используя getComputedStyle.Таким образом, вам не нужно создавать какие-либо файлы конфигурации .json.Все, что вам нужно сделать, это определить ваши переменные на карте, чтобы их можно было экспортировать в тело (или другой тег) в виде переменных CSS, а затем прочитать их в Angular.Вот пример того, как этого добиться.

_variables.scss 

/*** 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);
}

layout.directive.ts 

@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`;
  }
}
...