Written by Harry Roberts on CSS Wizardry.
Being the typically-polite Brit that I am, I often find myself feeling
sympathetic when I see people tweet things like
I used Sass’ @extend, and
that @extend mentions a Twitter user who doesn’t want to see that tweet
at all. This doesn’t just apply to @extend, either; what about
@media, or @import, or anyone who has a Twitter handle that’s also
a CSS at-rule?
This morning, I had an idea that might ease their suffering: use zero-width spaces to avoid mentioning people when you don’t mean to. Instead of writing @import, you’d write @[zero-width-space-here]import.
The only problem with this is that, on a Mac, at least, there is no shortcut for a zero-width spaces. Copying and pasting it—which, as you can imagine, is quite difficult—from Wikipedia is too much effort to even bother…
I’ve long been a fan of iOS’ (and now Mavericks’) keyboard shortcut mappings, so I decided to make use of these again. I’ve mapped the following pairs:
!@import @import !@media @media !@extend @extend
The reason for the exclamation mark is so that I can still actually write
@import when I need it in my CSS/Sass; the !@import version
is just for use on Twitter.
To add these shortcuts on your Mac:
On your iPhone:
Copy/paste the above rules into their respective boxes, and done. Add any more that you think might be useful.
I just used this for the first time, it worked a treat.
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.