Variables

To introduce variables, let’s use an example: your designer (even if you are your designer) informs you that your primary theme color is going to be R71 G82 B49, you can imagine that you’re going to be sprinkling rgb(71,82,49) all over your CSS file. That specific color might end up being the border of the items on the main page, the color of the text in the header, and the background of the app bar.

Sprinkling a value like this all over a file should smell bad to you. It means that if your designer changes her mind, you’re going to be changing colors in more than one place, and you’re opening yourself up to a mistake.

If you’re using LESS, however, you have the opportunity to define a variable to represent this primary color. You might even call the variable primaryColor. An example of the definition of that color and subsequent reference to it from a couple of places can be seen in Listing A-1.

Listing A-1.  A LESS variable used to store a color

@primaryColor: rgb(71,82,49);
  
#myListView .win-item {
    border: 1px solid @primaryColor;
    color: @primaryColor;
}
  
.win-appbar { background-color: @primaryColor; }

Listing A-1 shows how the actual color—rgb(71,82,49)—is defined only one time. If at some point in the future our designer informs us that this hue should be adjusted a bit, it only has to be done in one place.

Mixins

Mixins allow us to mix in one class with another. That is, we can have one class inherit all of the style properties of another class. In Listing A-2 you’ll see a reference class (.reference) that sets a border and a background color. Two subsequent classes (.styleA and .styleB) should both take the same border and background color properties, but also need to add some of their own.

Listing A-2.  An example of a LESS mixin

.reference {
    border: 1px solid black;
    background-color: gray;
}
  
.styleA {
    .reference;
    font-size: large;
}
  
.styleB {
    .reference;
    font-weight: bold;
}

Mixins can save a good deal of typing in some cases.

Besides simply referencing another class, you’ll have the opportunity to pass a parameter to the referenced style with a mixin. See what I mean in Listing A-3.

Listing A-3.  A mixin with a passed parameter

.reference (@borderWidth: 1px) {
    border: @borderWidth solid black;
    background-color: gray;
}
  
.styleA {
    .reference;
    font-size: large;
}
  
.styleB {
    .reference(2px);
    font-weight: bold;
}

Can you see what’s going on there? The .reference style now takes in a parameter called borderWidth with a default value of 1px. The .styleA property includes .reference but doesn’t specify a value for the borderWidth parameter, thus it gets all of the properties of the .reference rule with a default value for the border width. The .styleB property, however, includes .reference but does specify a value of 2px for the borderWidth parameter and thus it gets the properties of the .reference rule with a 2-pixel border.

Mixins allow for some very elegantly defined CSS that is expressive and concise and centralized so it’s easy to maintain.

Nested Rules

You’ve likely noticed that some CSS style selectors can get really lengthy. To access the list items in a list of class error in the div element called myDiv in the main section, you would end up with something like section[role=main] #myDiv .error li { ... }, and they can get much longer than that even.

To avoid this, you can use LESS’s nested rules. Nested rules allow you to define rules inside of one another and the inference is that each rule’s parent selector should apply to it. The two CSS sections in Listing A-4 have an identical effect.

Listing A-4.  Comparison of class CSS to LESS using nested rules

/* using classic CSS */
section[role=main] {
    font-size: large;
}
  
section[role=main] #myDiv {
    font-weight: bold;
}
  
section[role=main] #myDiv .error li {
    color: red;
}
  
/* using LESS nested rules */
section[role=main] {
    font-size: large;
    #myDiv {
        font-weight: bold;
        .error {
            li {
                color: red;
            }
        }
    }
}

Notice the redundancy present in the classic CSS section of Listing A-4. That repetition turns in to difficult maintenance and error-prone code. The LESS version is not a lot shorter in this case, but the point is that it is more logically defined and makes for better readability and better maintainability.

Remember that even when LESS is employed in your app, the client ends up using the resulting CSS anyway. This isn’t something that a browser engine has to decipher. It is still fed the CSS style rules in the format expected.

Functions and Operations

The final feature of LESS that we should look at is the functions and operations that it provides.

LESS gives us some intelligent ways to calculate values, and there are many times when calculated values are helpful. If a base length is 10 pixels, but some elements should be 2 pixels more or less than we should be able to calculate that difference, shouldn’t we?

Functions and operations are very often used in conjunction with variables. Let’s look at a few examples. First we’ll look in Listing A-5 at some calculations of length.

Listing A-5.  LESS calculations to determine border width

@borderWidth: 10px;
  
.styleA {
    border-width: (@borderWidth - 2);
    border-style: solid;
    border-color: black;
}
  
.styleB {
    border-width: (@borderWidth + 2);
    border-style: solid;
    border-color: black;
}

The .styleA rule in Listing A-5 would result in an 8-pixel border, and the .styleB rule would result in a 12-pixel border. The advantage over specifying those values explicitly comes when you decide to change the base border width. At that point all calculated borders are automatically adjusted.

These calculations can be done on colors too and there are some functions that give us some even fancier functionality. Adding colors may be counter-intuitive to you, but it’s really just adding the individual red, green, and blue components of the colors. A hex color of #123456 added with another color of #111111 would result in a color of #234567. Colors can be multiplied, divided, or subtracted too.

Besides the basic mathematical operations, some color functions are available. If I have a base color of #77C121, and want a color that is 10% darker, I can avoid a design time round trip to my favorite graphics package, and instead just use LESS’s darken() function. I’ll show an example of this in Listing A-6.

Listing A-6.  The darken() function used to calculate a darker color

@baseColor: #77C121;
  
.normal {
    background-color: @baseColor;
}
  
.disabled {
    background-color: darken(@baseColor, 10%);
}

In Listing A-6, a disabled item automatically gets a shade that’s 10% darker than the base color. This is probably my favorite trick in LESS. Being able to create basic color pallets and then express derivative colors from it is a very elegant way to style your app. A simple change to the base color amounts to the automatic creation of an entirely new derived color scheme.

Setup

Setting up your Windows 8 app to use LESS is not difficult.

First, let’s recall typical web architecture and where LESS fits into it. CSS normally lives in a web project and is served to the client from a static server file. For a web project using LESS, that CSS code is essentially dynamic, because a LESS processor has to generate it from the LESS code. This process can either happen on the server or on the client.

In Windows 8 apps, our architecture is a little bit different than a typical web application. A Windows 8 device is both the server and the client, so the division between server and client is effectively eliminated. For apps, therefore, I recommend following these steps to use the LESS JavaScript library for your processing:

1. Change the extension of your CSS files from .css to .less
2. Change your style sheet references to look like: <link rel="stylesheet/less" type="text/css" href="myLessStylesheet.less">. Pay attention to the rel (relationship) attribute value - stylesheet/less
3. Download the less.js library from lessjss.org and drop it into the js folder of your Windows 8 app. Remember, if you drop it directly into the folder structure of your app using Windows Explorer then you need to show the hidden files in Visual Studio and then right click on the less.js file and choose “Include in project”.
4. Add a reference to the less.js library that you downloaded. I recommend you put this on the default.html page. It should look something like: <script src="/js/less.js" type="text/javascript"></script>

I think you’re cruising with LESS now, and I think you’ll like it.