source: Dev/trunk/src/qed-client/css/old/tutorial.less @ 443

//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%);