How to use Less CSS with PHP

Do you now Less - Leaner CSS?

It is the CSS future!

Less allows you to extend the CSS functionality. You can add variables, nested rules (wich I love) and lots more.

You can code faster and less than using normal CSS.

Less was created for being used in Ruby. Lucky us we can use it in any other web lenguage.

There is a JavaScript version of the Less and you can add it to your projects.

Check out some of his features...

Variables

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Mixins

.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners(10px);
}

Nested rules

#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}

Operations

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}

How to use it?

You will need to add the 2 lines below.

Create a style.less file in your project and start coding 😉

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*