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; }
Code language: PHP (php)

Mixins

.rounded_corners (@radius: 5px) { border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); }
Code language: PHP (php)

Nested rules

#header { color: red; a { font-weight: bold; text-decoration: none; } }
Code language: PHP (php)

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; }
Code language: PHP (php)

How to use it?

You will need to add the 2 lines below.

Create a style.less file in your project and start coding πŸ˜‰

<link rel="stylesheet/less" href="style.less" type="text/css" /> <script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.32.min.js"></script>
Code language: HTML, XML (xml)
One comment

Leave a Reply

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

*
*