LESS and incron: CSS at its finest

less is, once again, more.

less is, once again, more.

Web development is full of challenges. That’s my nice way of saying writing CSS blows. CSS is powerful, but at the cost of being too fine grained and low level for easy development. It’s like the assembly of web design. Other developers are all-too-aware of the situation and have come up with a few solutions, including CSS frameworks, which reduce the amount of from-scratch code and provide a system (e.g., Blueprint or the 960 grid system), versus the freeform mess of raw CSS, and CSS extensions, like LESS, which is the topic of the day.

Act One: L-E-S-S spells bliss

If you aren’t using something like this yet, you might as well be punching yourself in the crotch every time you code.

I have also messed with Sass, which was not as “Syntactically Awesome” as LESS, and xCSS, which was overkill (but I might revisit it later). LESS is good because:

  • Any standard CSS file is a valid LESS file – easy to only use the features you need
  • Just as powerful as Sass, offering variables, functions, nesting, CSS-specialized math operations
  • Aptana CSS highlighting works great:
    1. Go: Window->Preferences
    2. General->Editors->File Associations
    3. Add file type: *.less
    4. Add editor: Aptana CSS Editor (right at the top)

I mean, look at this syntax:

@left_column_width: 300px;
@column_margin_width: 15px;

/** Palette **/
@light_blue: #d0dae3;
@pastel_blue: #7492ac;
@med_blue: #1e5d97;
@dark_blue: #0b3c68;

@light_orange: #f6b860;
@pastel_orange: #dfab62;
@med_orange: #e9951f;
@dark_orange: #a1630c;

/** Colors **/
@top_nav_color: @light_blue;
@top_nav_hover_color: @light_orange;
@header_color: @pastel_blue;

#header {
	clear:both;
	float:left;
	width:100%;
	border-bottom:1px solid @dark_blue - #111;
	background: @header_color;
	padding-bottom: 12px;
	margin-bottom: 7px;
	
	.page-title {
		float:left;
		clear:none;
		display:inline;
	}
}

/***** Two column layout a la   *********
****** http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm  *****/

/* column container */
.colmask {
	position:relative;
    clear:both;
    float:left;
    width:100%;			
	/*overflow:hidden;*/	
}

/* 2 column left menu settings */
.leftmenu {
    background:#fff;
	overflow:hidden;
	.colright {
	    float:left;
	    width:200%;
		position:relative;
		left: @left_column_width + (2 * @column_margin_width);
	    background:#fff;
	}
	
	.col1wrap {
	    float:right;
	    width:50%;
	    position:relative;
	    right: @left_column_width + (3 * @column_margin_width);
	    padding-bottom:1em;
	}
	
	.col1 {
	    margin:0 @column_margin_width 0 (@left_column_width + (4 * @column_margin_width));
	    position:relative;
	    right:100%;
	    /*overflow:hidden;*/
	}
	
	.col2 {
	    float:left;
	    width: @left_column_width ;
	    position:relative;
	    right: @left_column_width + @column_margin_width;
	}
}

Now you have an easily customizable two column layout and color scheme. Change your values in one place and they gracefully propagate. If you wanted to change the colors or column width before, you would have to change dozens of values. Really, stop what you’re doing, change your CSS file’s extension to .less, and become a happier person.

Act Two: Incron

So the only problem that I ran into is the bump in the workflow: compiling from LESS to CSS. This is where incron comes into play. Incron monitors files for changes and can trigger actions as specified by you with a cron-like syntax we can all love. I have a little Gentoo development box I use; I put incron on it and set it to run lessc whenever my LESS file changed. Just install/emerge incron, run incrontab -e and add one line:

	/path/to/less/files/mystyles.less IN_MODIFY lessc $@

Now you’ll have a file called my_styles.css and everything will be hunky dory. Of course this could easily be extended to do more powerful things with your styles, like move them into the right place or give them fancy names or version them or whatever. The potential here is also not limited to LESS, so consider it an investment. If this intrigues you, I think this tutorial should be all you need for now.

Well, web development is a big basket of ugly and this only addresses one aspect. There’s still cross-browser grossness and JavaScript debugging horror. But LESS helps. LESS helps.

Advertisements

10 responses to “LESS and incron: CSS at its finest

  1. This post warms my heart

  2. Ha, I knew you would come around. SASS sucks (compared to LESS).

  3. Haha, Sass seems to be more popular, which might give it an edge with features/maturity/whatever as a result of wider usage and development, but thus far not in any way that is very appreciable.

    The difference between LESS and Sass is the difference between 1% and 2% milk when you have been eating your cereal with laundry detergent.

  4. Awesome Blog thank you. After the Design and Development of the website comes SEO. If you would like to share a software that helps with off site seo reporting check out http://www.mofikiworldwide.com/mofikis_seo_analyzer.php and thank you for this blog.

  5. Pingback: SILT: Canvas/SVG, jQuery, LESS update « Superdrivel

  6. I’m loving LESS! I’m running into issues in Aptana. It seems that all the CSS syntax errors that are features of LESS are bogging down the editor. Have you had similar issues? Do you know of a way to shut off the error handling for .less files?

  7. Pingback: Incron, un cron guiado por eventos inotify « Geek's Story

  8. very helpfull thanx tutorial.

  9. Admin do you want unlimited content for your wordpress blog?

    Serarch in google:
    Anightund’s rewriter

  10. Pingback: Incron – Un cron basado en eventos | Blog Nº 13

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s