Stephen Lindberg

Product Designer @ Iterable

8 February 2022

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)) {