Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using the LESS library with CSS

Sunday, May 12th, 2013 by Servage

In a website design, we may encounter many problems that generally can’t solve by traditional or standard practices, but we have to deviate from the path and take entirely different ways. The same is true for me when I decided to play with colors in a website designing project. My intention was not limited up to colors, but to go some further in styles. However, CSS is good and CSS 3 is better, but in case of color variation or gradients that demands color code, which you have to take frequently from the color picker. Therefore, I have decided to add something in CSS so I have taken help from the LESS.

Basically LESS is a dynamic style sheet language that extends CSS using dynamic behavior inducing code like variables, mixins, operations and functions. Here I want to play with colors and color palette was restricted with limited options. Thus, LESS has given me variables to go ahead. When I am talking about LESS, most of the web developers avoid use of it, as it is a JavaScript library so it is running client side. Instead LESS they prefer Sass, which is running on server side and save clients from intensive processing of JavaScript in particular. Therefore, I was aware of this issue and have taken some precursory steps to prevent the performance problems.

The first step I have taken was that I used to use LESS only in development process and after completion I used to paste LESS output in a minifier and after that in a separate CSS file and replace LESS file with it. However, you can take another route like using to compile then minify it. Any way we can minimize footprint of styles as well as overcome the problem of browsers to stop running of JavaScript. We should take note that modern browsers are not creating JavaScript problems so use of LESS is safe now. If you want to pass LESS on the serve side you can use Node.js or Rhino for version 1.3.3 of LESS in particular.

As mentioned earlier I want to use LESS to play with colors so I have taken help of variables in LESS. Fundamentally, variables enable us to specify broadly used values in a single place and let you use that again throughout your style sheet. Thus, you can make global changes just with a change of single line. I have taken benefit from this property and created splash of colors in my website programming without taking hex values frequently. One more amazing thing I did to create gradients of a color just with adding or subtracting of the hex value of that color.

For instant if you nave pink color you can make light pink

@light_pink: @pink + #222;

@dark_pink: @pink - #222;

Done! No need to scroll for hex values!

If we want to create a gradient, we can apply these styles to three or four dives by adding or subtracting hex values of that particular original color. If you want to get same effect using Sass you simply can change the @ to $.

References & More Reading


Using the LESS library with CSS, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.