*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root { --color-primary: blue; --color-secondary: black; } .foo { font-size: 32px; font-size: 2rem; color: red; background: blue; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } .imported { /* imported style here */ } .bar { color: blue; display: block; bottom: 0; } @media screen and (min-width: 36em) { .foo { color: black } .foo { background: -webkit-gradient(linear, left top, left bottom, from(green), to(blue)); background: -webkit-linear-gradient(green, blue); background: linear-gradient(green, blue); } .bar { background: -webkit-gradient(linear, left top, left bottom, from(green), to(blue)); background: -webkit-linear-gradient(green, blue); background: linear-gradient(green, blue); } }