Angular — Утилита CSS-переменных

В каждом Front-End проекте вместо CSS я использую SCSS (CSS со сверхспособностями), потому что возможностей SCSS много и они полезны в крупномасштабных приложениях.

Одной из моих любимых функций являются переменные SCSS, которые помогают вам с шаблоном DRY (не повторяйтесь). Но недостатком является то, что эти переменные недоступны из JavaScript.

Эту проблему можно решить с помощью переменных CSS, также известных как пользовательские свойства CSS.

Переменные CSS — это объекты, определенные авторами CSS, которые содержат определенные значения для повторного использования в документе.

Я создал Angular Utility (Service), которая получает и устанавливает значение переменной CSS.

@Injectable()
export class CssVariablesUtility {
  public getValue(propertyName: string): string | null {
    try {
      const root: HTMLElement = document.documentElement;
      const value: string =                        
            getComputedStyle(root).getPropertyValue(propertyName);
      return value ? value.trim() : null;
    } catch(ex) { return null; }
  }
  public setValue(propertyName: string, newValue: string): void {
    try {
      const root: HTMLElement = document.documentElement;
      root.style.setProperty(propertyName, newValue);
    } catch (ex) { }
  }
}

Вы можете скачать приведенный выше код здесь.

РЕАЛЬНАЯ ЖИЗНЕННАЯ ПРОБЛЕМА

Допустим, у вас есть верхнее меню в приложении высотой 50 пикселей. И вы хотите создать элемент DOM с помощью JavaScript, и высота этого элемента должна быть равна области просмотра минус высота верхнего меню.

Вы можете установить следующую высоту элемента: calc(100vh — 50px) . Но если изменилось верхнее меню, вы также должны изменить высоту элемента JavaScript, и я почти уверен, что вы об этом забудете.

Давайте воспользуемся CSS-переменными и CSSVariablesUtility, чтобы решить эту проблему.

В CSS мы добавим это:

/* Variables */
:root { 
  --topmenu-height: 50px;
}
/* Menu */
.top-menu {
  height: var(--topmenu-height);
}

И в JavaScript мы добавим это:

constructor(
  private cssVariablesUtility: CssVariablesUtility
}
ngAfterViewInit() {
  const topMenuHeight: number = this.cssVariablesUtility
                                    .getValue('--topmenu-height');
  el.style.height = `calc(100vh - ${topMenuHeight})`;
}

Теперь высота элемента зависит от CSS!!!

Если вам понравилось это, пожалуйста, похлопайте и поставьте звездочку репозиторию.