21 January, 2014

Written by 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:

1. System Preferences
2. Keyboard
3. Text

On your iPhone:

1. Settings
2. General
3. Keyboard
4. Shortcuts

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.