cheatsheet/src/content/variables.md

Cheatsheet boilerplate. Created for the new lesscss.org website, based on Shopify Cheat Sheet by Mark Dunkley.

@a: 2;
@x: (@a * @a);
@y: (@x + 1);
@z: (@x * 2 + @y);
@var: -1;

.variables {
  width: (@z + 1cm); // 14cm
}

@b: @a * 10;
@c: #888;

@fonts: "Trebuchet MS", Verdana, sans-serif;
@f: @fonts;

@quotes: "~" "~";
@q: @quotes;
@onePixel: 1px;

.variables {
  height: (@b + @x + 0px); // 24px
  color: @c;
  font-family: @f;
  quotes: @q;
}

.redef {
    @var: 0;
	.inition {
		@var: 4;
		@var: 2;
		three: @var;
		@var: 3;
	}
	zero: @var;
}

.values {
	minus-one: @var;
    @a: 'Trebuchet';
    @multi: 'A', B, C;
    font-family: @a, @a, @a;
    color: @c !important;
    multi: something @multi, @a;
}

.variable-names {
    @var: 'hello';
    @name: 'var';
    name: @@name;
}

.alpha {
    @var: 42;
    filter: alpha(opacity=@var);
}

.polluteMixin() {
    @a: 'pollution';
}
.testPollution {
    @a: 'no-pollution';
    a: @a;
	.polluteMixin();
	a: @a;
}

.units {
  width: @onePixel;
  z-index: (@onePixel / @onePixel);
  square-pixel-divided: (@onePixel * @onePixel / @onePixel);
  odd-unit: unit((@onePixel * 4em / 2cm));
  percentage: (10 * 50%);
  pixels: (50px * 10);
  conversion-metric-a: (20mm + 1cm);
  conversion-metric-b: (1cm + 20mm);
  conversion-imperial: (1in + 72pt + 6pc);
  custom-unit: (42octocats * 10);
  custom-unit-cancelling: (8cats / 4cats);
}