Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

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.

Tweet This Deep thoughts by @BenNadel - Normalizing String Values In Less CSS Mixins Thanks my man — you rock the party that rocks the body!



Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.