Advertisement

Quick Tip: You Need to Check out LESS.js

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

You might be familiar with such services as LESS and Sass. They allow for far more flexibility when creating your stylesheets, including the use of variables, operators, mix-ins, even nested selectors. However, because LESS was originally built with Ruby, a lot of PHP developers, despite the fact that there are PHP versions available, never used it.


Full Screencast



Step 1. Reference LESS.js

 
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

Step 2. Import a Stylesheet

 
<link rel="stylesheet/less" href="style.less" />

Note that we've set the rel attribute to "stylesheet/less" and that our actual stylesheets has an extension of .less, not .css. Also, we must link to this stylesheet before Less.js.


Step 3. Have Fun!

With this minimal amount of work, you now have access to everything from variables to mix-ins. Be sure to watch the four minute video tutorial above for full examples, but here are a few quickies.

  
/* 
Variables! 
*/ 
@primary_color: green; 
  
/* 
Mix-ins are like functions for commonly used operations, 
such as apply borders. We create variables by prepending 
the @ symbol. 
*/ 
.rounded(@radius: 5px) { 
	-moz-border-radius: @radius; 
	-webkit-border-radius: @radius; 
	border-radius: @radius; 
} 
  
#container { 
/* References the variable we created above. */ 
	background: @primary_color; 
  
/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */ 
	.rounded(20px);  
  
/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */ 
	a { 
		color: red; 
	} 
}

It's important to remember that LESS.js isn't finished; hopefully, it will be soon. Nonetheless, it's working wonderfully so far. What do you think?

Advertisement