:root, @custom-media etc — это валидный css?

Question

[lufasab]

Полез в исходники flexboxgrid и вижу там файл в src с расширением .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);

Если бы это был например scss, sass, less - я бы вопрос не задавал. А это что разве CSS? В CSS что можно использовать переменные как в Sass? Непонятно, это рабочий код, я могу это использваоть без препроцессоров и таск раннеров?

Answer 1

[Сергей delphinpro]

Да, переменные в css можно использовать - Переменные в CSS: зачем они нам?

@custom-media - а это что-то из области postcss наверное.

Comments

[lufasab]

Вот package.json:
"grunt": "^0.4.5",
"grunt-autoprefixer": "^0.7.2",
"grunt-contrib-cssmin": "^0.7.0",
"grunt-contrib-htmlmin": "^0.1.3",
"grunt-contrib-uglify": "^0.2.7",
"grunt-contrib-watch": "^0.5.3",
"grunt-myth": "^1.0.1",
"grunt-processhtml": "^0.2.9"

Вроде бы ПостЦСС нету. Меня интересует, я этот файл могу прямо брать и использовать в чистую как CSS, без пре и пост процессоров? Подставляя нужные переменные. Удобно ведь.

[lufasab]

Смотрите что нашел stackoverflow.com/questions/35444599/cssnext-how-t...

However, people working on CSS specifications have thought about a solution for custom media queries. It's @custom-media

Выходит это уже в спецификации CSS есть?