CSS and Sass/SCSS

Here are things I’ve learned about CSS and Sass.

Media queries

calc() can be used inside media queries

/* CSS */
@media (min-width: calc(36rem * 2 + 4rem)) { …

Sass can do math without calc() and only one value needs units:

/* SCSS */
@media (min-width: 36 * 2 + 4rem) { …

CSS properties cannot be used in media queries. invalid:

@media (min-width: var(--breakpoint)) { …