LESS blog post examples

CSS_pre_less.css

#header { background-color: silver; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#header h1 { color: black; font-weight: bold; font-family: 'ChunkFive'; }
#header h1 a { text-decoration: none; }
#header h1 a:hover { text-decoration: underline; }

hooks.hgrc

[hooks]
pre-commit = cd path/to/less_compiler; php less_compiler.php;

install_lessc.bash

$ sudo port install nodejs
$ sudo port install npm
$ sudo npm install less -g

less_compile_js.html

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

less_compiler.php

<?php

function compile_to_css($path, $file)
{
    $less_path = $path . '/' . $file;
    
    $folder = str_replace("/less", "/css", $path);
    
    $css_path = $folder . '/' . str_replace("less", "css", $file);
    $css_min_path = str_replace(".css", ".min.css", $css_path);
    
    if (!is_dir($folder))
    {
        mkdir($folder, 0775, true);
    }
    
    $add_required = !file_exists($css_path);

    system("lessc $less_path $css_path");
    system("lessc -x $less_path $css_min_path");

    if ($add_required)
    {
        system("hg add -q $css_path");
        system("hg add -q $css_min_path");
    }   
}

function parse_directory($path)
{
    $dir = opendir($path);

    while (false !== ($node = readdir($dir)))
    {
        if ($node != '.' && $node != '..')
        {
            if (is_dir($path . '/' . $node))
            {
                parse_directory($path . '/' . $node);
            }
            else
            {
                $file = "{$path}/{$node}";
                $filename = substr($file, strripos($file, '/') + 1);
                
                if (preg_match("#.less$#i", $file) && $filename[0] != "_")
                {
                    echo "Compiling {$path}/{$node}\n";
                    
                    compile_to_css($path, $node);
                }
                else
                {
                    echo "Skipping compilation for {$path}/{$node}\n";
                }   
            }
        }
    }
}

parse_directory(dirname(__FILE__) . '/less');

less_initial.less

#header {
    background-color: silver; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;
	
    h1 {
        color: black;
        font-weight: bold;
        font-family: 'ChunkFive';
		
        a {
            text-decoration: none;
            
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

less_with_functions.less

.border-radius (@r1, @r2, @r3, @r4) {
    border-radius: @r1 @r2 @r3 @r4;
    -moz-border-radius: @r1 @r2 @r3 @r4;
    -webkit-border-radius: @r1 @r2 @r3 @r4;
}

.border-radius (@r1) {
    .border-radius(@r1, @r1, @r1, @r1);
}

#header {
    background-color: silver; 
    .border-radius(3px);
	
    h1 {
        color: black;
        font-weight: bold;
        font-family: 'ChunkFive';
		
        a {
            text-decoration: none;
			
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

lessc_compilation.bash

$ lessc -x path/to/less_style.less path/to/css_output.min.css
$ lessc path/to/less_style.less path/to/css_output.css

load_stylesheet.php

<?php

// Usage: <? load_stylesheet('default'); ?>

function load_stylesheet($path_to_stylesheet, $override = false)
{
    // MODE has (go figure) the mode the site is operating in. MODE_LIVE and MODE_STAGE are the two 
    // "production" modes.
    if (MODE == MODE_LIVE || MODE == MODE_STAGE || $override)
    {
        echo '<link href="/css/'.$path_to_stylesheet.'.min.css" type="text/css" rel="stylesheet" />' . "\n";
    }
    else
    {
        echo '<link rel="stylesheet/less" href="/less/'.$path_to_stylesheet.'.less?date='.date('YmdHis').'" type="text/css" />' . "\n";
        echo '<script src="/js/less-1.1.4.min.js" type="text/javascript" charset="utf-8"></script>' . "\n";
    }
}