Smarter CSS with LESS

As your projects grow, you’ll begin to realize you repeat the same things over and over. A color style, gradients , positions, type treatments etc. Pre-processors like less attempt to curve that and give you more power and control over how you develop your css and save you time. By giving you access to familiar attributes like variables, extending classes, inheriting, loops and so much more, Less is a must have tool.

Using Variables

Taking a lesson from classical programming techniques, less gives you the ability to create reusable variables. A great usage of this would be for backgrounds, colors and even image paths. To create variables, simply add @ symbol in front of your would be variable name and like selectors set the value . ie @logo-color: #0099CC would create a variable that now contains your brand color. To us it simply replace your color value with the variable name @logo-color.

@logo-color: #0099CC;
 
.logo-text{
	color: @logo-color;
}

Outputs

.logo-text{
	color: #0099CC;
}

With variables you are not limited to just color outputs; you can also use strings, numbers and even set the variables values based on another. Say you have image locations for different themes; instead of doing a find and replace all you can create a list of variables and set set the values to your image locations. Using this method, you can now use your variable as the base path for your url.

@dark-img: “images/dak-theme”;
@light-img: “images/light-theme”;
@img-location: @dark-img

.theme-widget{
	background: url(“@{img-location}/arrow.png”)
}

outputs
.theme-widget{
	background: url(“images/dak-theme/arrow.png”)
}

Nested Selectors

As teams and projects get larger it becomes more important that you have well organized code that doesn’t conflict with each other. Less provides a great way to do that using nested classes. Lets say we wanted to create a button widget that didn’t conflict with any other widget on the page using straight css we would have to do the following.

.btn{
	background: #65941F;
}

.btn.btn-title{
	color: #406607
	letter-spacing: .1em;
	font-weight: bold;
}

.btn.btn-desc{
	font-size: 1.2em;
}

You can already so how many steps we have to take just to isolate are widget from affecting other parts of code. Less provides a simpler and more manageable way to have nested selectors that will output the same code above. By adding the & in front of your class declaration, less evaluate your style as include with parent.

.btn{
    background: #65941F;
    &.btn-title {
	    color: #406607
        letter-spacing: .1em;
        font-weight: bold;
     }

     &.btn-desc{
        font-size: 1.2em;
     }
}

What’s great about using these nested classes is anything in your parent class gets inherited by your nested classes. And anything in your nested classes can overwrite your parent classes. Giving you the best balance between clean organized and extendable code.

Mixins the art of Reusable

Speaking of inheriting, less allows us to quickly and easily inherit from selectors. Known as mixin, this techniques allows us to create a set of rules and use it across multiple selectors.For example, lets say you created a class with the perfect style for titles; instead of copying and pasting that code in every class we can simply add the class name to our new class and it will automatically add those rules.

.base-title{
	font-weight: bold;
	margin-bottom: 2em;
	font-size: 3em;
	color: red;
}

.page-title{
	.base-title;
}

Outputs:
.page-title {
	font-weight: bold;
	margin-bottom: 2em;
	font-size: 3em;
	color: red;
}

In our example, we created a base-title class mixin and by adding it to our .page-title class, .page-title inherits all of the rules from the base-title class. But what happens if you like the mixin class but you want to make some minor modifications. You’re in luck, less supports everything css does, so you can overwrite what ever rules and properties you want.

.page-title{
	.base-title;
	color: #C79426
}

In our example above we simply replace the original color of red from our base class to our new orange variant color #C79426.

Next Steps:

With less support you are able to extend css and take advance of a ton of time saving techniques. We’ve only touched the surface of the power that less provides, in the next post we’re going into more detail about how you can use mixins as functions and add another level or customization.