Normalizing String Values In Less CSS Mixins
When you're writing straight CSS, it doesn't matter that you have different opinions about which values should be quoted; but, when you write Less CSS mixings, a difference of opinion can lead to buggy code. As such, it would be nice to normalize string values inside of your mixins such that you could provide a standard output no matter the format of the input.
After some trial and error, I found out that I could do this in Less CSS by interpolating and then escaping the input. This serves to remove quotes from the input, if they exist, leaving you with a non-quoted value. You can then use this non-quoted value to generate properly-quoted output (because, come on, quotes are the awesome).
| // Our test mixin that expects a URL. In CSS, it's an unfortunate fact that | |
| // urls work with and without quotes; this means that CSS authors don't have | |
| // to adhere to a standard. To address this, we'll normalize the input URL | |
| // so that we can make sure it is properly output (with quotes). | |
| .test-mixin( @url ; @properties ) { | |
| // In this case, we'll just blindly use the value provided. | |
| original: url( @url ) @properties ; | |
| // In this case, we'll normalize the URL so that we know we're dealing | |
| // with a non-quoted value. | |
| @normalizedUrl: ~"@{url}" ; | |
| // ... and, once we have a non-quoted value, we can ensure that the | |
| // generated output is properly quoted. | |
| normalized: url( "@{normalizedUrl}" ) @properties ; | |
| } | |
| // ---------------------------------------------------------- // | |
| // ---------------------------------------------------------- // | |
| // Using DOUBLE-quotes with both normal and escaped strings. | |
| h1 { | |
| .test-mixin( "../../image/path.png" ; other-value ) ; | |
| } | |
| h1 { | |
| .test-mixin( ~"../../image/path.png" ; other-value ) ; | |
| } | |
| // Using SINGLE-quotes with both normal and escaped strings. | |
| h2 { | |
| .test-mixin( '../../image/path.png' ; other-value ) ; | |
| } | |
| h2 { | |
| .test-mixin( ~'../../image/path.png' ; other-value ) ; | |
| } |
Notice that we are testing this with both double and single quotes. When we compile the above Less CSS code, we get the following CSS output:
| h1 { | |
| original: url("../../image/path.png") other-value; | |
| normalized: url("../../image/path.png") other-value; | |
| } | |
| h1 { | |
| original: url(../../image/path.png) other-value; | |
| normalized: url("../../image/path.png") other-value; | |
| } | |
| h2 { | |
| original: url('../../image/path.png') other-value; | |
| normalized: url("../../image/path.png") other-value; | |
| } | |
| h2 { | |
| original: url(../../image/path.png) other-value; | |
| normalized: url("../../image/path.png") other-value; | |
| } |
As you can see, all four instances provided the same normalized output:
normalized: url("../../image/path.png") other-value;
Anyway, just a small post; but, something that I think will be helpful when I start to write more Less CSS mixins. Plus, if you need to pass Less variables into JavaScript, it will be critical to have a normalized value when interpolating the JavaScript code.
Want to use code from this post? Check out the license.
Reader Comments