Каким образом тут в CSS используются переменные?

Question

[dhat]

Копаюсь в сетке на флексбоксе. Файлы .css. Каким образом вообще работает этот код, не понимаю???

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
  --xs-min: 30;
  --sm-min: 48;
  --md-min: 64;
  --lg-min: 75;
  --screen-xs-min: var(--xs-min)em;
  --screen-sm-min: var(--sm-min)em;
  --screen-md-min: var(--md-min)em;
  --screen-lg-min: var(--lg-min)em;
  --container-sm: calc(var(--sm-min) + var(--gutter-width));
  --container-md: calc(var(--md-min) + var(--gutter-width));
  --container-lg: calc(var(--lg-min) + var(--gutter-width));
}

@custom-media --sm-viewport only screen and (min-width: 48em);
@custom-media --md-viewport only screen and (min-width: 64em);
@custom-media --lg-viewport only screen and (min-width: 75em);

Это что за CSS такой?

Comments

[DTX]

А есть ссылка на эту сетку на живом сайте?

[dhat]

DTX: flexboxgrid.com

Answer 1

[Денис Инешин]

Using CSS variables

По сути, ничего такого тут нет, не кроссбраузерно пока правда. Те же препроцессоры вроде LESS и SASS давно уже умеют так же. Синтаксис у них немного другой правда, переменные пишутся с @.

Comments

[dhat]

Спасибо, попробую перенести это в scss...