Advertisement
JavaScript & AJAX

Quick Tip: You Need to Check out LESS.js

by

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?

Related Posts
  • Code
    JavaScript & AJAX
    Connect 4 With Socket.ioSocket io wide retina preview
    Today we'll see how we can use Node.js and Socket.io to create a multiplayer Connect 4 style game.Read More…
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Web Design
    HTML/CSS
    A Simple Mixin Alternative to Standard CSS GridsMixin grid retina
    Over the past few years CSS grid systems have become a very popular way of rapidly producing layout scaffolding in web design. They can be a fantastic time-saving resource, with talented coders having intelligently crafted systems which cater to a wide array of possible layouts designers might need to create. However, this isn't the only way to approach grid-based web layouts, and today we're going to examine an alternative.Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…