CSS: Finally the standard CSS implementation is starting to catch up with LESS/SCSS and gives us variables to use in CSS code

css_variables.css

// define all CSS variables in the root block
:root {
    --main-color: blue;
}

.hover-text {
    transition: all 0.5s;
}

//apply CSS variables using var() method and the variable name
.hover-text:hover {
    color: var(--main-color);
    font-size: 20px;
}

.box {
    position: fixed;
    width: 50px;
    height: 50px;
    background: red;
    border: 1px solid black;
    animation: size-down ease-out 0.5s infinite alternate both;

}

@keyframes size-down {
  //apply CSS variables using var() method and the variable name
    100% {transform: scale(0.3, 0.3); background: var(--main-color);}
}