I'm not really sure I understand this. How is the new if() conditional function different from using @media (width ...) when adapting layouts to browser width?

Its basically the same, just more convinent syntax.

I think if can also do string equality on variable values, which is a bit new but also niche. The main point is just to do @media but inside a property decleration.