//Variables and operations
@variable: value;
@variable2; @variable + value;	// /*-+, etc...
//Variables are a constant!

//You can use variables in varnames - eval()??
@varName: "This is the value";
@var: "varName";
property: @@var; // read this as: Paste @var into X for the expression 'property is variable X'
//property = variable(variable(a));

//Mixins
.mixin {
	border-top: 1px solid #fff;	//Compilation preserves, so can be used as actual class in HTML
}
.mixin () {
	border-top: 1px solid #fff;	//Compilation does not preserve, only for LESS purposes.
}
.mixin (@color: #default) {
	border-top: 1px solid @color;	//Arguments.
}
.mixin (@x: 0, @y: 0) {
	margin: @arguments;	//Use this to get space-separated list of all arguments!
}

// The following two mixins use a switch argument, behaving like an if/else or switch(arg1){}.
.mixin (black, @color) {
	border-top: 1px solid #fff;
	background-color: black;
}
.mixin (white, @color) {
	border-top: 1px solid #fff;
	background-color: white;
}

//Match on arity (argument count):
.mixin (@a) {
	content: "Only if one arg: @{a}";
}
.mixin (@a, @b) {
	content: "When two args: @{a}, @{b}";
}

//GUARDS! When you want to match on expressions!
.mixin (@a) when (lightness(@a) >= 50%) {
	background-color: black;
}

.mixin (@a) when (isnumber(@a)), (isstring(@a)) {
	//This matches when @a is a string OR number (comma separated guards)
}
.mixin (@a) when (iscolor(@a)) and (lightness(@a) < 50%) {
	// This matches when @a is a color with lightness under 50% (AND separated guards)
}
.mixin (@a) when not (@a > 0) {
	//derp. Not keyword werkt ook
}

/*Expressions:
- iscolor
- isnumber
- isstring
- iskeyword?
- isurl

isnumber specifiek:
- ispixel
- ispercentage
- isem
*/

.parent {
	.descendant {
		//descendant selector, evaluates to .parent .descendant{}
	}
	&.concat {
		//concatenate selector, evaluates to .parent.concat{}
	}
	&[dojo-type="Button"] {
		// works as well, evaluates to .parent[dojo-type="Button"]{}
	}
	&:hover {
		//sets hover property for .parent:hover !!
	}
}

// Operations: Can be applied to all numbers, color and variables. //These can be nested as well!
@base: 5%;
@other: @base + #aaa; //apaarently, LESS understands and converts these units?
@var123: 1px + 5; // Output will be in px as well, since you specified them.
border: (@width * 2) solid black; // Use brackets in compound statements!

// Color operations: all colours are first converted to HSL space
lighten/darken	//lightness (%)
saturate/desaturate	//saturation (%)
fadein/fadeout/fade	//transparency. fade sets absolute alpha, the others are relative to @color passed in (%)
spin //hue, degrees spun on colour wheel (unitless number)
mix // mix two colours.

hue/saturation/lightness/alpha //return these for @color passed as argument
@new = hsl(hue(@old), 45%, 90%); // generate new colour

//Math functions!
round, ceil, floor	//do what you'd expect.
percentage	//returns rational as percentage

//NAMESPACES
#nameSpace {
	.button() {
		//stuff
	}
}

.header a {
	#nameSpace > .button;	// Access namespace variables:) CANNOT DO THIS WITH VARIABLES!!!!
}

/* These will be added to compiled CSS */
// These won't, and are for use in LESS sheet only

@import "lib.less";
@import "lib";	//assumed to be LESS file
@import "file.css";	//normal css imports


//String interpolation: Same as DOJO templates, with @ instead of $
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

//String escapes:
~"stuffffff"; //Will be added to compiled CSS as-is. Useful for retarded MS-specific (invalid CSS) statements/hacks

//Wait, WHUT
//JAVASCRIPT EVALUATION?!?!?!?!

@var: `"hello".toUpperCase() + '!'`; // Wrap stuff in backticks and it will eval before compilation! :D
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;	//You can still use string interp for this! Why the ~ though?

@height: `document.body.clientHeight`; //WTF. How does this even work if it is compiled serverside?
@color: color(`window.colors.baseColor`);	//Use color() to parse JS colours as CSS colours
@darkcolor: darken(@color, 10%);