Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

Normalizing String Values In Less CSS Mixins

By Ben Nadel on
Tags: HTML / CSS

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.



Reader Comments