Use a different prefix to denote media-queries?

[planktonic]

Right now we use the @ symbol to denote a class being applied at a given breakpoint e.g.

.t-my-class {…}
.t-my-class@medium {…} // applies only at the 'medium' breakpoint

That’s easy to read, but sadly causes issues with various build tools (here on github it gets a bright red background apparently? :D), as they don’t recognise the @ symbol even though it’s valid. Escaping the symbol .t-my-class\@medium also doesn’t work, as some build tools do understand the @ symbol and choke on the backslash.

So we should probably change the symbol, possibly to : e.g.

.t-my-class {…}
.t-my-class:medium {…} // applies only at the 'medium' breakpoint