Your Problem
So you have a link thats a phone number. You have this because you want the link to auto dial when on a phone but look like text and not have any functionality when on a screen larger than a phone. As an engineer you don’t want to duplicate html to provide this feature and would love if css had a way to encapsulate this on one place. What can we do? Try something like this:
a { @include rem(font-size, 16px);
@include media(‘<tablet’) { @include rem(font-size, 12px); }
@include media(”>=tablet”) { &[href^=“tel”]{ cursor: default; pointer-events: none; } }
@include media(“<tablet”) { &[href^=“tel”]{ text-decoration: underline!important; } } }
Notes
This is sass and I am using sass-rem for typography and include-media for media queries.
