понимание деклараций CSS внутри flexboxgrid

Question

Я как раз собирался через код этой рамки HERE

Я вижу такие вещи, как

: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); 

Что на земле это?

Answer 1

Это переменные CSS. Добро пожаловать в будущее.

Посмотреть более подробную информацию:

• http://www.w3.org/TR/css-variables/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
• http://caniuse.com/#feat=css-variables