Commits

Doug Stewart committed cbbbc95

README + LESSc updates.

Comments (0)

Files changed (8)

 
 [Demo Site](http://lblg.zamoose.org)
 
+[FAQs](http://literalbarrage.org/blog/code/elbee-elgee/faq)
+
 ### LICENSE ###
 All code (PHP, HTML, CSS and JavaScript) is licensed under the GNU Public License version 2 ([GPLv2](<http://www.gnu.org/licenses/gpl-2.0.html>)). All header images were taken by me and are also licensed under GPLv2. All icons are from the Icon Set for Bloggers by [StudioPress](http://studiopress.com).
 

includes/wp-less/lessc/README.md

-# lessphp v0.3.0
-#### <http://leafo.net/lessphp>
+# lessphp v0.3.1
+### <http://leafo.net/lessphp>
 
 `lessphp` is a compiler for LESS written in PHP. The documentation is great,
-so check it out: <http://leafo.net/lessphp/docs/>. Here's a quick tutorial:
+so check it out: <http://leafo.net/lessphp/docs/>.
 
-### How to use in your php project
+Here's a quick tutorial:
+
+### How to use in your PHP project
 
 Copy `lessc.inc.php` to your include directory and include it into your project.
 
 
 	try {
 		lessc::ccompile('input.less', 'output.css');
-	catch (exception $ex) {
+	} catch (exception $ex) {
 		exit($ex->getMessage());
 	}
 
+`lessc::ccompile` is not aware of imported files that change. Read [about
+`lessc::cexecute`](http://leafo.net/lessphp/docs/#compiling_automatically).
+
 Note that all failures with lessc are reported through exceptions.
 If you need more control you can make your own instance of lessc.
 
 line. In the simplest invocation, you specify an input file and the compiled
 css is written to standard out:
 
-	~> plessc input.less > output.css
+	$ plessc input.less > output.css
 
 Using the -r flag, you can specify LESS code directly as an argument or, if 
 the argument is left off, from standard in:
 
-	~> plessc -r "my less code here"
+	$ plessc -r "my less code here"
 
 Finally, by using the -w flag you can watch a specified input file and have it 
 compile as needed to the output file
 
-	~> plessc -w input-file output-file
+	$ plessc -w input-file output-file
 
 Errors from watch mode are written to standard out.
 

includes/wp-less/lessc/docs/docs.md

-    title: v0.3.0 documentation
+    title: v0.3.1 documentation
     link_to_home: true
 --
 
     }
     ```
 
+#### `@arguments` Variable
+
+Within an mixin there is a special variable named `@arguments` that contains
+all the arguments passed to the mixin along with any remaining arguments that
+have default values. The value of the variable has all the values separated by
+spaces.
+
+This useful for quickly assigning all the arguments:
+
+    ```less
+    .box-shadow(@inset, @x, @y, @blur, @spread, @color) {
+      box-shadow: @arguments;
+      -webkit-box-shadow: @arguments;
+      -moz-box-shadow: @arguments;
+    }
+    .menu {
+      .box-shadow(1px, 1px, 5px, #aaa);
+    }
+    ```
+
+In addition to the arguments passed to the mixin, `@arguments` will also inlude
+remaining default values assigned by the mixin:
+
+
+    ```less
+    .border-mixin(@width, @style: solid, @color: black) {
+      border: @arguments;
+    }
+
+    pre {
+      .border-mixin(4px, dotted);
+    }
+
+    ```
+
 ### Import
 
 Multiple LESS files can be compiled into a single CSS file by using the
 * `floor(number)` -- returns the floor of a numerical input
 * `round(number)` -- returns the rounded value of numerical input
 
-* `lighten(color, percent)` -- lightens color by percent and returns it
-* `darken(color, percent)` -- darkens color by percent and returns it
+* `lighten(color, percent)` -- lightens `color` by `percent` and returns it
+* `darken(color, percent)` -- darkens `color` by `percent` and returns it
 
-* `saturate(color, percent)` -- saturates color by percent and returns it
-* `desaturate(color, percent)` -- desaturates color by percent and returns it
+* `saturate(color, percent)` -- saturates `color` by `percent` and returns it
+* `desaturate(color, percent)` -- desaturates `color` by `percent` and returns it
 
-* `fadein(color, percent)` -- makes color less transparent by percent and returns it
-* `fadeout(color, percent)` -- makes color more transparent by percent and returns it
+* `fadein(color, percent)` -- makes `color` less transparent by `percent` and returns it
+* `fadeout(color, percent)` -- makes `color` more transparent by `percent` and returns it
 
-* `spin(color, amount)` -- returns a color with amount degrees added to hue
+* `spin(color, amount)` -- returns a color with `amount` degrees added to hue
+
+* `fade(color, amount)` -- retuns a color with the alpha set to `amount`
+
+* `hue(color)` -- retuns the hue of `color`
+
+* `saturation(color)` -- retuns the saturation of `color`
+
+* `lightness(color)` -- retuns the lightness of `color`
+
+* `alpha(color)` -- retuns the alpha value of `color` or 1.0 if it doesn't have an alpha
+
+* `percentage(number)` -- converts a floating point number to a percentage, eg. `0.65` -> `65%`
+
+* `mix(color1, color1, percent)` -- mixes two colors by percentagle where 100%
+  keeps all of `color1`, and 0% keeps all of `color2`. Will take into account
+  the alpha of the colors if it exists. See
+  <http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#mix-instance_method>.
 
 * `rgbahex(color)` -- returns a string containing 4 part hex color.
    
 function which does a `vardump` on the argument. Try passing the function
 different values from LESS and see what the results are.
 
-The return value of the registered function must also be a LESS type, but if it is
+The return value of the registered function must also be a **lessphp** type, but if it is
 a string or numeric value, it will automatically be coerced into an appropriate
 typed value. In our example, we reconstruct the value with our modifications
 while making sure that we preserve the original type.
 
+In addition to the arguments passed from **lessphp**, the instnace of
+**lessphp** itself is sent to the registered function as the second argument.
+
 ## Command Line Interface
 
 **lessphp** comes with a command line script written in PHP that can be used to

includes/wp-less/lessc/lessc.inc.php

 <?php
 
 /**
- * lessphp v0.3.0
+ * lessphp v0.3.1
  * http://leafo.net/lessphp
  *
  * LESS css compiler, adapted from http://lesscss.org
 	protected $count;
 	protected $line;
 	protected $libFunctions = array();
-	protected $nextBlockId = 0;
+	static protected $nextBlockId = 0;
 
 	public $indentLevel;
 	public $indentChar = '  ';
 	// or the one passed in through $values
 	function zipSetArgs($args, $values) {
 		$i = 0;
+		$assigned_values = array();
 		foreach ($args as $a) {
 			if ($i < count($values) && !is_null($values[$i])) {
 				$value = $values[$i];
 				$value = $a[1];
 			} else $value = null;
 
-			$this->set($this->vPrefix.$a[0], $this->reduce($value));
+			$value = $this->reduce($value);
+			$this->set($this->vPrefix.$a[0], $value);
+			$assigned_values[] = $value;
 			$i++;
 		}
+
+		// copy over any extra default args
+		for ($i = count($values); $i < count($assigned_values); $i++) {
+			$values[] = $assigned_values[$i];
+		}
+
+		$this->env->arguments = $values;
 	}
 
 	// compile a prop and update $lines or $blocks appropriately
 			return array(array('color', 0, 0, 0));
 		}
 		list($color, $delta) = $args[2];
-		if ($color[0] != 'color')
+		$color = $this->coerceColor($color);
+		if (is_null($color))
 			$color = array('color', 0, 0, 0);
 
 		$delta = floatval($delta[1]);
 		return round($hsl[3]);
 	}
 
+	// get the alpha of a color
+	// defaults to 1 for non-colors or colors without an alpha
+	function lib_alpha($color) {
+		if ($color[0] != 'color') return 1;
+		return isset($color[4]) ? $color[4] : 1;
+	}
+
+	// set the alpha of the color
+	function lib_fade($args) {
+		list($color, $alpha) = $this->colorArgs($args);
+		$color[4] = $this->clamp($alpha / 100.0);
+		return $color;
+	}
+
+	function lib_percentage($number) {
+		return array('%', $number[1]*100);
+	}
+
+	// mixes two colors by weight
+	// mix(@color1, @color2, @weight);
+	// http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#mix-instance_method
+	function lib_mix($args) {
+		if ($args[0] != "list")
+			throw new exception("mix expects (color1, color2, weight)");
+
+		list($first, $second, $weight) = $args[2];
+		$first = $this->assertColor($first);
+		$second = $this->assertColor($second);
+
+		$first_a = $this->lib_alpha($first);
+		$second_a = $this->lib_alpha($second);
+		$weight = $weight[1] / 100.0;
+
+		$w = $weight * 2 - 1;
+		$a = $first_a - $second_a;
+
+		$w1 = (($w * $a == -1 ? $w : ($w + $a)/(1 + $w * $a)) + 1) / 2.0;
+		$w2 = 1.0 - $w1;
+
+		$new = array('color',
+			$w1 * $first[1] + $w2 * $second[1],
+			$w1 * $first[2] + $w2 * $second[2],
+			$w1 * $first[3] + $w2 * $second[3],
+		);
+
+		if ($first_a != 1.0 || $second_a != 1.0) {
+			$new[] = $first_a * $p + $second_a * ($p - 1);
+		}
+
+		return $this->fixColor($new);
+	}
+
+	function assertColor($value, $error = "expected color value") {
+		$color = $this->coerceColor($value);
+		if (is_null($color)) throw new exception($error);
+		return $color;
+	}
+
 	function toHSL($color) {
 		if ($color[0] == 'hsl') return $color;
 
 						if ($args[0] == 'list')
 							$args = $this->compressList($args[2], $args[1]);
 
-						$var = call_user_func($f, $this->reduce($args));
+						$var = call_user_func($f, $this->reduce($args), $this);
 
 						// convet to a typed value if the result is a php primitive
 						if (is_numeric($var)) $var = array('number', $var);
 		return $var;
 	}
 
+	function coerceColor($value) {
+		switch($value[0]) {
+			case 'color': return $value;
+			case 'keyword':
+				$name = $value[1];
+				if (isset(self::$cssColors[$name])) {
+					list($r, $g, $b) = explode(',', self::$cssColors[$name]);
+					return array('color', $r, $g, $b);
+				}
+				return null;
+		}
+	}
+
 	// evaluate an expression
 	function evaluate($op, $left, $right) {
 		$left = $this->reduce($left);
 		$right = $this->reduce($right);
 
+		if ($left_color = $this->coerceColor($left)) {
+			$left = $left_color;
+		}
+
+		if ($right_color = $this->coerceColor($right)) {
+			$right = $right_color;
+		}
+
 		if ($left[0] == 'color' && $right[0] == 'color') {
 			$out = $this->op_color_color($op, $left, $right);
 			return $out;
 		$b = new stdclass;
 		$b->parent = $this->env;
 
-		$b->id = $this->nextBlockId++;
+		$b->id = self::$nextBlockId++;
 		$b->tags = $tags;
 		$b->props = array();
 		$b->children = array();
 	// get the highest occurrence entry for a name
 	function get($name) {
 		$current = $this->env;
+
+		$is_arguments = $name == $this->vPrefix . 'arguments';
 		while ($current) {
+			if ($is_arguments && isset($current->arguments)) {
+				return array('list', ' ', $current->arguments);
+			}
+
 			if (isset($current->store[$name]))
 				return $current->store[$name];
 			else
 		if ($this->count >= strlen($this->buffer)) return false;
 
 		// shortcut on single letter
-		if (!$eatWhitespace and strlen($what) == 1) {
+		if (!$eatWhitespace && strlen($what) == 1) {
 			if ($this->buffer{$this->count} == $what) {
 				$this->count++;
 				return true;
 		}
 
 	}
+
+	static protected $cssColors = array(
+		'aliceblue' => '240,248,255',
+		'antiquewhite' => '250,235,215',
+		'aqua' => '0,255,255',
+		'aquamarine' => '127,255,212',
+		'azure' => '240,255,255',
+		'beige' => '245,245,220',
+		'bisque' => '255,228,196',
+		'black' => '0,0,0',
+		'blanchedalmond' => '255,235,205',
+		'blue' => '0,0,255',
+		'blueviolet' => '138,43,226',
+		'brown' => '165,42,42',
+		'burlywood' => '222,184,135',
+		'cadetblue' => '95,158,160',
+		'chartreuse' => '127,255,0',
+		'chocolate' => '210,105,30',
+		'coral' => '255,127,80',
+		'cornflowerblue' => '100,149,237',
+		'cornsilk' => '255,248,220',
+		'crimson' => '220,20,60',
+		'cyan' => '0,255,255',
+		'darkblue' => '0,0,139',
+		'darkcyan' => '0,139,139',
+		'darkgoldenrod' => '184,134,11',
+		'darkgray' => '169,169,169',
+		'darkgreen' => '0,100,0',
+		'darkgrey' => '169,169,169',
+		'darkkhaki' => '189,183,107',
+		'darkmagenta' => '139,0,139',
+		'darkolivegreen' => '85,107,47',
+		'darkorange' => '255,140,0',
+		'darkorchid' => '153,50,204',
+		'darkred' => '139,0,0',
+		'darksalmon' => '233,150,122',
+		'darkseagreen' => '143,188,143',
+		'darkslateblue' => '72,61,139',
+		'darkslategray' => '47,79,79',
+		'darkslategrey' => '47,79,79',
+		'darkturquoise' => '0,206,209',
+		'darkviolet' => '148,0,211',
+		'deeppink' => '255,20,147',
+		'deepskyblue' => '0,191,255',
+		'dimgray' => '105,105,105',
+		'dimgrey' => '105,105,105',
+		'dodgerblue' => '30,144,255',
+		'firebrick' => '178,34,34',
+		'floralwhite' => '255,250,240',
+		'forestgreen' => '34,139,34',
+		'fuchsia' => '255,0,255',
+		'gainsboro' => '220,220,220',
+		'ghostwhite' => '248,248,255',
+		'gold' => '255,215,0',
+		'goldenrod' => '218,165,32',
+		'gray' => '128,128,128',
+		'green' => '0,128,0',
+		'greenyellow' => '173,255,47',
+		'grey' => '128,128,128',
+		'honeydew' => '240,255,240',
+		'hotpink' => '255,105,180',
+		'indianred' => '205,92,92',
+		'indigo' => '75,0,130',
+		'ivory' => '255,255,240',
+		'khaki' => '240,230,140',
+		'lavender' => '230,230,250',
+		'lavenderblush' => '255,240,245',
+		'lawngreen' => '124,252,0',
+		'lemonchiffon' => '255,250,205',
+		'lightblue' => '173,216,230',
+		'lightcoral' => '240,128,128',
+		'lightcyan' => '224,255,255',
+		'lightgoldenrodyellow' => '250,250,210',
+		'lightgray' => '211,211,211',
+		'lightgreen' => '144,238,144',
+		'lightgrey' => '211,211,211',
+		'lightpink' => '255,182,193',
+		'lightsalmon' => '255,160,122',
+		'lightseagreen' => '32,178,170',
+		'lightskyblue' => '135,206,250',
+		'lightslategray' => '119,136,153',
+		'lightslategrey' => '119,136,153',
+		'lightsteelblue' => '176,196,222',
+		'lightyellow' => '255,255,224',
+		'lime' => '0,255,0',
+		'limegreen' => '50,205,50',
+		'linen' => '250,240,230',
+		'magenta' => '255,0,255',
+		'maroon' => '128,0,0',
+		'mediumaquamarine' => '102,205,170',
+		'mediumblue' => '0,0,205',
+		'mediumorchid' => '186,85,211',
+		'mediumpurple' => '147,112,219',
+		'mediumseagreen' => '60,179,113',
+		'mediumslateblue' => '123,104,238',
+		'mediumspringgreen' => '0,250,154',
+		'mediumturquoise' => '72,209,204',
+		'mediumvioletred' => '199,21,133',
+		'midnightblue' => '25,25,112',
+		'mintcream' => '245,255,250',
+		'mistyrose' => '255,228,225',
+		'moccasin' => '255,228,181',
+		'navajowhite' => '255,222,173',
+		'navy' => '0,0,128',
+		'oldlace' => '253,245,230',
+		'olive' => '128,128,0',
+		'olivedrab' => '107,142,35',
+		'orange' => '255,165,0',
+		'orangered' => '255,69,0',
+		'orchid' => '218,112,214',
+		'palegoldenrod' => '238,232,170',
+		'palegreen' => '152,251,152',
+		'paleturquoise' => '175,238,238',
+		'palevioletred' => '219,112,147',
+		'papayawhip' => '255,239,213',
+		'peachpuff' => '255,218,185',
+		'peru' => '205,133,63',
+		'pink' => '255,192,203',
+		'plum' => '221,160,221',
+		'powderblue' => '176,224,230',
+		'purple' => '128,0,128',
+		'red' => '255,0,0',
+		'rosybrown' => '188,143,143',
+		'royalblue' => '65,105,225',
+		'saddlebrown' => '139,69,19',
+		'salmon' => '250,128,114',
+		'sandybrown' => '244,164,96',
+		'seagreen' => '46,139,87',
+		'seashell' => '255,245,238',
+		'sienna' => '160,82,45',
+		'silver' => '192,192,192',
+		'skyblue' => '135,206,235',
+		'slateblue' => '106,90,205',
+		'slategray' => '112,128,144',
+		'slategrey' => '112,128,144',
+		'snow' => '255,250,250',
+		'springgreen' => '0,255,127',
+		'steelblue' => '70,130,180',
+		'tan' => '210,180,140',
+		'teal' => '0,128,128',
+		'thistle' => '216,191,216',
+		'tomato' => '255,99,71',
+		'turquoise' => '64,224,208',
+		'violet' => '238,130,238',
+		'wheat' => '245,222,179',
+		'white' => '255,255,255',
+		'whitesmoke' => '245,245,245',
+		'yellow' => '255,255,0',
+		'yellowgreen' => '154,205,50'
+	);
 }
 

includes/wp-less/lessc/tests/inputs/colors.less

 	zero: spin(#000000, 100);
 	zero: spin(#ffffff, 100);
 }
+
+
+alpha {
+	// g: alpha(red);
+	g: alpha(rgba(0,0,0,0));
+	g: alpha(rgb(155,55,0));
+}
+
+fade {
+	f: fade(red, 50%);
+	f: fade(#fff, 20%);
+	f: fade(rgba(34,23,64,0.4), 50%);
+}
+
+@a: rgb(255,255,255);
+@b: rgb(0,0,0);
+
+.mix {
+	color: mix(@a, @b, 50%);
+}
+
+.percent {
+	per: percentage(0.5);
+}
+
+// color keywords
+
+.colorz {
+	color: whitesmoke - 10;
+	color: spin(red, 34);
+}
+
+

includes/wp-less/lessc/tests/inputs/mixins.less

 }
 
 
+// arguments
+
+.spam(@something: 100) {
+	@wow: 23434;
+    foo: @arguments;
+    bar: @arguments;
+}
+
+.eggs {
+    .spam(1px, 2px, 4px, 8px);
+}
+
+.first(@one, @two, @three, @four: cool) {
+	cool: @arguments;
+}
+
+#hello {
+	.first(one, two, three);
+}
+
+
+.rad() {
+	cool: @arguments;
+}
+
+#world {
+	@hello: "world";
+	.rad("@{hello}");
+}
+
+.second() {
+	things: @arguments;
+}
+
+#another {
+	.second(red, blue, green);
+	.second(red blue green);
+}
+
+
+.another() {
+  .cool {
+    color: @arguments;
+  }
+}
+
+#day {
+	.another(one,two, three);
+	.another(one two three);
+}
+
+
+
+

includes/wp-less/lessc/tests/outputs/colors.css

   zero:#56124b;
   zero:#000000;
   zero:#ffffff;
+}
+alpha {
+  g:0;
+  g:1;
+}
+fade {
+  f:rgba(255,0,0,0.5);
+  f:rgba(255,255,255,0.2);
+  f:rgba(34,23,64,0.5);
+}
+.mix { color:#7f7f7f; }
+.percent { per:50%; }
+.colorz {
+  color:#ebebeb;
+  color:#ff9100;
 }

includes/wp-less/lessc/tests/outputs/mixins.css

 }
 body b { color:blue; }
 .hello .world { color:blue; }
-.foobar { color:blue; }
+.foobar { color:blue; }
+.eggs {
+  foo:1px 2px 4px 8px;
+  bar:1px 2px 4px 8px;
+}
+#hello { cool:one two three cool; }
+#world { cool:"world"; }
+#another {
+  things:red blue green;
+  things:red blue green;
+}
+#day .cool { color:one two three; }
+#day .cool { color:one two three; }