Doing LESS with style

functionsAndOperators.less

@width: 100%;
@column-width: @width / 3;
@base-color: #cfcfcf;

.container {
    width: @width;
    
    .column {
        width: @column-width;
    }
    
    p {
        color: multiply(#ff6600, #000000) / 4;
        background-color: @base-color + #111;
    }
}

mixins.less

.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.header-text {
    color: #000;
    font-family: verdana;
    font-size: 20px;
    &:hover {
        color: green;
    }
}

.sub-header-text() {
    color: #ccc;
    font-family: arial;
    font-size: 16px;
    &:hover {
        color: red;
    }
}

h1 {
    .header-text();
}

h2 {
    .sub-header-text();
}

namespaces.less

#namespace {
    .component {
      background: #000;
    }
}
 
.component {
  background: #ccc;
}
 
.container {
    .list-item {
        .component;
    }
    
    .other-list-item {
        #namespace .component;
    }
}

otherFeatures.less

/*
 I'm a multiline
 comment, as you can see 
 */
 
@var1: #ccc; //single line comment

@import "bootstrap"; // or bootstrap.less
@import "main.css"; // .css files too! 

scope.less

@color: #000; 

#page {
    #header {
        color: @color; 
    }
    @color: #fff;
}

variables.less

// Variables
@color-green:        #428bca; 
@color-dark-green:  darken(@color-green, 10%);
@selector-handle: handle;
@url-images: "../path/to/images";

@property: color;


p {
    @{property}: @color-green;
    
    &:hover {
        color: @color-dark-green;
    }
}

.@{selector-handle} {
    // rule set
}

span {
    background: url("@{url-images}/image-name.png");
}