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