Skip to main content
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: Mallory Woods
Ben Nadel at cf.Objective() 2017 (Washington, D.C.) with: Mallory Woods ( @THEMalloryWoods )

Normalizing String Values In Less CSS Mixins

By on
Tags:

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

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel