first import

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-08 11:40:19 +02:00
commit 1bc61b12ad
8435 changed files with 1582817 additions and 0 deletions

View File

@@ -0,0 +1,36 @@
/* accessors */
#defaults {
@width: 960px;
@color: black;
.something {
@space: 10px;
@hello {
color: green;
}
}
}
.article { color: #294366; }
.comment {
width: #defaults[@width];
color: .article['color'];
padding: #defaults > .something[@space];
}
.wow {
height: .comment['width'];
background-color: .comment['color'];
color: #defaults > .something > @hello['color'];
padding: #defaults > non-existant['padding'];
margin: #defaults > .something['non-existant'];
}
.mix {
#defaults;
font-size: .something[@space];
}

View File

@@ -0,0 +1,77 @@
// simple arity
.hello(@a) {
color: one;
}
.hello(@a, @b) {
color: two;
}
.hello(@a, @b, @c) {
color: three;
}
.world(@a, @b, @c) {
color: three;
}
.world(@a, @b) {
color: two;
}
.world(@a) {
color: one;
}
.one {
.hello(1);
.world(1);
}
.two {
.hello(1, 1);
.world(1, 1);
}
.three {
.hello(1, 1, 1);
.world(1, 1, 1);
}
// arity with default values
.foo(@a, @b: cool) {
color: two;
}
.foo(@a, @b: cool, @c: yeah) {
color: three;
}
.baz(@a, @b, @c: yeah) {
color: three;
}
.baz(@a, @b: cool) {
color: two;
}
.multi-foo {
.foo(1);
.foo(1, 1);
.foo(1,1,1);
}
.multi-baz {
.baz(1);
.baz(1, 1);
.baz(1,1,1);
}

View File

@@ -0,0 +1,41 @@
* { color: blue; }
E { color: blue; }
E[foo] { color: blue; }
[foo] { color: blue; }
[foo] .helloWorld { color: blue; }
[foo].helloWorld { color: blue; }
E[foo="barbar"] { color: blue; }
E[foo~="hello#$@%@$#^"] { color: blue; }
E[foo^="color: green;"] { color: blue; }
E[foo$="239023"] { color: blue; }
E[foo*="29302"] { color: blue; }
E[foo|="239032"] { color: blue; }
E:root { color: blue; }
E:nth-child(odd) { color: blue; }
E:nth-child(2n+1) { color: blue; }
E:nth-child(5) { color: blue; }
E:nth-last-child(-n+2) { color: blue; }
E:nth-of-type(2n) { color: blue; }
E:nth-last-of-type(n) { color: blue; }
E:first-child { color: blue; }
E:last-child { color: blue; }
E:first-of-type { color: blue; }
E:last-of-type { color: blue; }
E:only-child { color: blue; }
E:only-of-type { color: blue; }
E:empty { color: blue; }
E:lang(en) { color: blue; }
E::first-line { color: blue; }
E::before { color: blue; }
E#id { color: blue; }
E:not(:link) { color: blue; }
E F { color: blue; }
E > F { color: blue; }
E + F { color: blue; }
E ~ F { color: blue; }

View File

@@ -0,0 +1,65 @@
// builtin
@something: "hello world";
@color: #112233;
@color2: rgba(44,55,66, .6);
body {
color: @something;
@num: 7 / 6;
height: @num + 4;
height: floor(@num) + 4px;
height: ceil(@num) + 4px;
@num2: 2 / 3;
width: @num2;
width: round(@num2);
width: floor(@num2);
width: ceil(@num2);
width: round(10px / 3);
color: rgbahex(@color);
color: rgbahex(@color2);
color: argb(@color2);
}
format {
@r: 32;
format: %("rgb(%d, %d, %d)", @r, 128, 64);
format-string: %("hello %s", "world");
format-multiple: %("hello %s %d", "earth", 2);
format-url-encode: %('red is %A', #ff0000);
eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));
}
#functions {
str: isstring("hello");
str: isstring(one, two);
num: isnumber(2323px);
num: isnumber(2323);
num: isnumber(4/5);
num: isnumber("hello");
col: iscolor(red);
col: iscolor(hello);
col: iscolor(rgba(0,0,0,0.3));
col: iscolor(#fff);
key: iskeyword(hello);
key: iskeyword(3D);
px: ispixel(10px);
px: ispixel(10);
per: ispercentage(10%);
per: ispercentage(10);
em: isem(10em);
em: isem(10);
}

View File

@@ -0,0 +1,139 @@
body {
color: hsl(34, 50%, 40%);
color: hsla(34, 50%, 40%, 0.3);
lighten: lighten(#efefef, 10%);
lighten: lighten(rgb(23, 53, 231), 22%);
lighten: lighten(rgba(212, 103, 88, 0.5), 10%);
darken: darken(#efefef, 10%);
darken: darken(rgb(23, 53, 231), 22%);
darken: darken(rgba(23, 53, 231, 0.5), 10%);
saturate: saturate(#efefef, 10%);
saturate: saturate(rgb(23, 53, 231), 22%);
saturate: saturate(rgba(23, 53, 231, 0.5), 10%);
desaturate: desaturate(#efefef, 10%);
desaturate: desaturate(rgb(23, 53, 231), 22%);
desaturate: desaturate(rgba(23, 53, 231, 0.5), 10%);
spin: spin(#efefef, 12);
spin: spin(rgb(23, 53, 231), 15);
spin: spin(rgba(23, 53, 231, 0.5), 19);
spin: spin(#efefef, -12);
spin: spin(rgb(23, 53, 231), -15);
spin: spin(rgba(23, 53, 231, 0.5), -19);
one: fadein(#abcdef, 10%);
one: fadeout(#abcdef, -10%);
two: fadeout(#029f23, 10%);
two: fadein(#029f23, -10%);
three: fadein(rgba(1,2,3, 0.5), 10%);
three: fadeout(rgba(1,2,3, 0.5), -10%);
four: fadeout(rgba(1,2,3, 0), 10%);
four: fadein(rgba(1,2,3, 0), -10%);
hue: hue(rgb(34,20,40));
sat: saturation(rgb(34,20,40));
lit: lightness(rgb(34,20,40));
@old: #34fa03;
@new: hsl(hue(@old), 45%, 90%);
what: @new;
zero: saturate(#123456, -100%);
zero: saturate(#123456, 100%);
zero: saturate(#000000, 100%);
zero: saturate(#ffffff, 100%);
zero: lighten(#123456, -100%);
zero: lighten(#123456, 100%);
zero: lighten(#000000, 100%);
zero: lighten(#ffffff, 100%);
zero: spin(#123456, -100);
zero: spin(#123456, 100);
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%);
color: mix(rgba(5,3,1,0.3), rgba(6,3,2, 0.8), 50%);
}
.percent {
per: percentage(0.5);
}
// color keywords
.colorz {
color: whitesmoke - 10;
color: spin(red, 34);
color: spin(blah);
}
// purposfuly whacky to match less.js
@color: #fcf8e3;
body {
start: @color;
spin: spin(@color, -10); // #fcf4e3
chained: darken(spin(@color, -10), 3%); // gives #fbeed5, should be #fbefd5
direct: darken(#fcf4e3, 3%); // #fbefd5
}
// spin around
pre {
@errorBackground: #f2dede;
spin: spin(@errorBackground, -10);
}
dd {
@white: #fff;
background-color: mix(@white, darken(@white, 10%), 60%);
}
// math
.ops {
c: red * 0.3;
c: green / 2;
c: purple % 7;
c: 4 * salmon;
c: 1 + salmon;
c: 132 / red;
c: 132 - red;
c: 132- red;
}

View File

@@ -0,0 +1,39 @@
@mixin {
height: 22px;
ul {
height: 20px;
li {
@color: red;
height: 10px;
div span, link {
margin: 10px;
color: @color;
}
}
div, p {
border: 1px;
&.hello {
color: green;
}
:what {
color: blue;
}
}
a {
b {
color: blue;
}
}
}
}
body {
@mixin;
}

View File

@@ -0,0 +1,15 @@
@hello: "utf-8";
@charset @hello;
@-moz-document url-prefix(){
div {
color: red;
}
}
@page :left { margin-left: 4cm; }
@page :right { margin-left: 3cm; }
@page { margin: 2cm }

View File

@@ -0,0 +1,20 @@
body {
@hello: "world";
border: e("this is simple");
border: e(this is simple); // bug in lessjs
border: e("this is simple", "cool lad");
border: e(1232);
border: e(@hello);
border: e("one" + 'more'); // no string addition lessjs
border: e(); // syntax error lessjs
line-height: ~"eating rice";
line-height: ~"string cheese";
line-height: a b c ~"string me" d e f;
line-height: ~"string @{hello}";
}
.class {
filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')";
}

View File

@@ -0,0 +1,28 @@
@font-directory: 'fonts/';
@some-family: Gentium;
@font-face: maroon; // won't collide with @font-face { }
@font-face {
font-family: Graublau Sans Web;
src: url(@{font-directory}GraublauWeb.otf) format("opentype");
}
@font-face {
font-family: @some-family;
src: url('@{font-directory}Gentium.ttf');
}
@font-face {
font-family: @some-family;
src: url("@{font-directory}GentiumItalic.ttf");
font-style: italic;
}
h2 {
font-family: @some-family;
crazy: @font-face;
}

View File

@@ -0,0 +1,88 @@
.simple(@hi) when (@hi) {
color: yellow;
}
.something(@hi) when (@hi = cool) {
color: red;
}
.another(@x) when (@x > 10) {
color: green;
}
.flipped(@x) when (@x =< 10) {
color: teal;
}
.yeah(@arg) when (isnumber(@arg)) {
color: purple;
}
.yeah(@arg) when (ispixel(@arg)) {
color: silver;
}
.hello(@arg) when not (@arg) {
color: orange;
}
dd {
.simple(true);
.simple(2344px);
}
b {
.something(cool);
.something(birthday);
}
img {
.another(12);
.another(2);
.flipped(12);
.flipped(2);
}
body {
.yeah("world");
.yeah(232px);
.yeah(232);
.hello(true);
}
.something(@x) when (@x) and (@y), not (@x = what) {
color: blue;
}
div {
@y: true;
.something(true);
}
pre {
.something(what);
}
.coloras(@g) when (iscolor(@g)) {
color: true @g;
}
link {
.coloras(red);
.coloras(10px);
.coloras(ffjref);
.coloras(#fff);
.coloras(#fffddd);
.coloras(rgb(0,0,0));
.coloras(rgba(0,0,0, .34));
}

View File

@@ -0,0 +1,6 @@
// css hacks
:root .alert-message, :root .btn {
border-radius: 0 \0;
}

View File

@@ -0,0 +1,5 @@
div:before {
content: "hi!";
}

View File

@@ -0,0 +1,12 @@
foo {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000);
}
foo {
filter: alpha(opacity=20);
filter: alpha(opacity=20, enabled=true);
filter: blaznicate(foo=bar, baz=bang bip, bart=#fa4600);
}

View File

@@ -0,0 +1,56 @@
@import 'file1.less'; // file found and imported
@import "not-found";
@import "something.css" media;
@import url("something.css") media;
@import url(something.css) media, screen, print;
@color: maroon;
@import url(file2); // found and imported
body {
line-height: 10em;
@colors;
}
div {
@color: fuchsia;
@import "file2";
}
.mixin-import() {
@import "file3";
}
.one {
.mixin-import();
color: blue;
}
.two {
.mixin-import();
}
#merge-import-mixins {
@import "a";
@import "b";
div { .just-a-class; }
}
@import "inner/file1";
// test bubbling variables up from imports, while preserving order
pre {
color: @someValue;
}
@import "file3";

View File

@@ -0,0 +1,52 @@
@keyframes 'bounce' {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 100px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}
@-webkit-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(-100%) scale(.7); }
}
div {
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes 'diagonal-slide' {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}

View File

@@ -0,0 +1,121 @@
.unary {
// all operators are parsable as unary operators, anything
// but - throws an error right now though,
// this gives two numbers
sub: 10 -5;
// add: 10 +5; // error
// div: 10 /5; // error
// mul: 10 *5; // error
}
.spaces {
// we can make the parser do math by leaving out the
// space after the first value, or putting spaces on both sides
sub: 10-5;
sub: 10 - 5;
add: 10+5;
add: 10 + 5;
// div: 10/5; // this wont work, read on
div: 10 / 5;
mul: 10*5;
mul: 10 * 5;
}
// these properties have divison not in parenthases
.supress-division {
border-radius: 10px / 10px;
border-radius: 10px/10px;
border-radius: hello (10px/10px) world;
@x: 10px;
font: @x/30 sans-serif;
font: 10px / 20px sans-serif;
font: 10px/20px sans-serif;
border-radius:0 15px 15px 15px / 0 50% 50% 50%;
}
.parens {
// if you are unsure, then just wrap the expression in parentheses and it will
// always evaluate.
// notice we no longer have unary operators, and these will evaluate
sub: (10 -5);
add: (10 +5);
div: (10 /5);
div: (10/5); // no longer interpreted as the shorthand
mul: (10 *5);
}
.keyword-names {
// watch out when doing math with keywords, - is a valid keyword character
@a: 100;
@b: 25;
@a-: "hello";
height: @a-@b; // here we get "hello" 25, not 75
}
.negation {
hello: -(1px);
hello: 0-(1px);
@something: 10;
hello: -@something;
}
// and now here are the tests
.test {
single: (5);
single: 5+(5);
single: (5)+((5));
parens: (5 +(5)) -2;
// parens: ((5 +(5)) -2); // FAILS - fixme
math: (5 + 5)*(2 / 1);
math: (5+5)*(2/1);
width: 2 * (4 * (2 + (1 + 6))) - 1;
height: ((2+3)*(2+3) / (9-4)) + 1;
padding: (2px + 4px) 1em 2px 2;
@var: (2 * 2);
padding: (2 * @var) 4 4 (@var * 1px);
width: (@var * @var) * 6;
height: (7 * 7) + (8 * 8);
margin: 4 * (5 + 5) / 2 - (@var * 2);
}
.percents {
color: 100 * 10%;
color: 10% * 100;
color: 10% * 10%;
color: 100px * 10%; // lessjs makes this px
color: 10% * 100px; // lessjs makes this %
color: 20% + 10%;
color: 20% - 10%;
color: 20% / 10%;
}
.misc {
x: 10px * 4em;
y: 10 * 4em;
}
.cond {
y: 10 < 10;
y: 10 >= 10;
}

View File

@@ -0,0 +1,64 @@
@media screen, 3D {
P { color: green; }
}
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
@media all and (min-width: 0px) {
body { line-height: 1.2 }
}
@media all and (min-width: 0) {
body { line-height: 1.2 }
}
@media
screen and (min-width: 102.5em) and (max-width: 117.9375em),
screen and (min-width: 150em) {
body { color: blue }
}
@media screen and (min-height: 100px + 10px) {
body { color: red; }
}
@cool: 100px;
@media screen and (height: @cool) and (width: @cool + 10), (size: @cool + 20) {
body { color: red; }
}
// media bubbling
@media test {
div {
height: 20px;
@media (hello) {
color: red;
pre {
color: orange;
}
}
}
}
// should not cross boundary
@media yeah {
@page {
@media cool {
color: red;
}
}
}

View File

@@ -0,0 +1,93 @@
@color: #fff;
@base_path: "/assets/images/";
@images: @base_path + "test/";
.topbar { background: url(@{images}topbar.png); }
.hello { test: empty-function(@images, 40%, to(@color)); }
.css3 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%,
from(#E9A000), to(#A37000));
}
/**
Here is a block comment
**/
// this is a comment
.test, /*hello*/.world {
border: 1px solid red; // world
/* another property */
color: url(http://mage-page.com);
string: "hello /* this is not a comment */";
world: "// neither is this";
string: 'hello /* this is not a comment */' /*what if this is a comment */;
world: '// neither is this' // hell world;
;
what-/*something?*/ever: 100px;
background: url(/*no comment here*/);
}
.urls {
@var: "http://google.com";
background: url(@var);
background: url(@{var});
background: url("@{var}");
}
.mix(@arg) { color: @arg; }
@aaa: aaa;
@bbb: bbb;
// make sure the opening selector isn't too greedy
.cool {.mix("@{aaa}, @{bbb}")}
.cool();
.cool("{hello");
.cool('{hello');
// merging of mixins
.span-17 { float: left; }
.span-17 { width: 660px; }
.x {.span-17;}
.hi {
pre {
color: red;
}
}
.hi {
pre {
color: blue;
}
}
.rad {
.hi;
}
hello {
numbers: 1.0 0.1 .1 1.;
numbers: 1.0s 0.1s .1s 1.s;
numbers: -1.0s -0.1s -.1s -1.s;
numbers: -1.0 -0.1 -.1 -1.;
}
#string {
hello: 'what\'s going on here';
hello: 'blah blag @{ blah blah';
join: 3434 + "hello";
join: 3434 + hello;
}

View File

@@ -0,0 +1,40 @@
@outer: 10px;
@class(@var:22px, @car: 400px + @outer) {
margin: @var;
height: @car;
}
@group {
@f(@color) {
color: @color;
}
.cool {
border-bottom: 1px solid green;
}
}
.class(@width:200px) {
padding: @width;
}
body {
.class(2.0em);
@group > @f(red);
@class(10px, 10px + 2);
@group > .cool;
}
@lots(@a: 10px, @b: 20px, @c: 30px, @d: 40px, @e: 4px, @f:3px, @g:2px, @h: 1px) {
padding: @a @b @c @d;
margin: @e @f @g @h;
}
.skip_args {
@class(,12px);
@lots(,,,88px,,12px);
@group > @f(red,,,,);
@group > @f(red);
}

View File

@@ -0,0 +1,100 @@
@tester {
p, div { height: 10px; }
}
#test1 {
div { color: red; }
@tester;
}
@cool {
a,b,i { width: 1px; }
}
#test2 {
b { color: red; }
@cool;
}
#test3 {
@cool;
b { color: red; }
}
@cooler {
a { margin: 1px; }
}
#test4 {
a, div, html { color: blue; }
@cooler;
}
@hi {
img, strong { float: right; }
}
#test5 {
img, strong { padding: 2px; }
@hi;
}
@nested {
div, span {
a {
color: red;
}
}
}
#test6 {
div, span {
a {
line-height: 10px;
}
}
@nested;
}
@broken-nesting {
div, span {
strong, b {
color: red;
}
}
}
#test7 {
div {
strong {
margin: 1px;
}
}
@broken-nesting;
}
@another-nest {
a,b {
i {
color: red;
}
s {
color: blue;
}
}
}
#test8 {
a, b {
i,s {
background: red;
}
}
@another-nest;
}

View File

@@ -0,0 +1,159 @@
@rounded-corners {
border-radius: 10px;
}
.bold {
@font-size: 20px;
font-size: @font-size;
font-weight: bold;
}
body #window {
@rounded-corners;
.bold;
line-height: @font-size * 1.5;
}
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
}
#header a {
color: orange;
#bundle > .button; // mixin the button class
}
div {
@abstract {
hello: world;
b {
color: blue;
}
}
@abstract > b;
@abstract;
}
@poop {
big: baby;
}
body {
div;
}
// not using > to list mixins
.hello {
.world {
color: blue;
}
}
.foobar {
.hello .world;
}
.butter {
.this .one .isnt .found;
}
// arguments
.spam(@something: 100, @dad: land) {
@wow: 23434;
foo: @arguments;
bar: @arguments;
}
.eggs {
.spam(1px, 2px);
.spam();
}
.first(@one, @two, @three, @four: cool) {
cool: @arguments;
}
#hello {
.first(one, two, three);
}
#hello-important {
.first(one, two, three) !important;
}
.rad(@name) {
cool: @arguments;
}
#world {
@hello: "world";
.rad("@{hello}");
}
.second(@x, @y:skip, @z: me) {
things: @arguments;
}
#another {
.second(red, blue, green);
.second(red blue green);
}
.another(@x, @y:skip, @z:me) {
.cool {
color: @arguments;
}
}
#day {
.another(one,two, three);
.another(one two three);
}
.to-be-important() {
color: red;
@color: red;
height: 20px;
pre {
color: @color;
}
}
.mix-suffix {
.to-be-important() !important;
}
#search-all {
.red() {
color:#f00 !important;
}
}
#search-all {
.green() {
color: #0f0 !important;
}
}
.search-test {
#search-all > .red();
#search-all > .green();
}

View File

@@ -0,0 +1,60 @@
#header {
color: black;
.navigation {
font-size: 12px;
.border {
.outside {
color: blue;
}
}
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
a { b { ul { li { color: green; } } } }
this { will { not { show { } } } }
.cool {
div & { color: green; }
p & span { color: yellow; }
}
another {
.cool;
}
b {
& .something {
color: blue;
}
&.something {
color: blue;
}
}
.foo {
.bar, .baz {
& .qux {
display: block;
}
.qux & {
display: inline;
}
.qux & .biz {
display: none;
}
}
}
b {
hello [x="&yeah"] {
color: red;
}
}

View File

@@ -0,0 +1,167 @@
.demo (light, @color) {
color: lighten(@color, 10%);
}
.demo (@_, @color) {
display: block;
}
@switch: light;
.class {
.demo(@switch, #888);
}
// by arity
.mixin () {
zero: 0;
}
.mixin (@a: 1px) {
one: 1;
}
.mixin (@a) {
one-req: 1;
}
.mixin (@a: 1px, @b: 2px) {
two: 2;
}
.mixin (@a, @b, @c) {
three-req: 3;
}
.mixin (@a: 1px, @b: 2px, @c: 3px) {
three: 3;
}
.zero {
.mixin();
}
.one {
.mixin(1);
}
.two {
.mixin(1, 2);
}
.three {
.mixin(1, 2, 3);
}
//
.mixout ('left') {
left: 1;
}
.mixout ('right') {
right: 1;
}
.left {
.mixout('left');
}
.right {
.mixout('right');
}
//
.border (@side, @width) {
color: black;
.border-side(@side, @width);
}
.border-side (left, @w) {
border-left: @w;
}
.border-side (right, @w) {
border-right: @w;
}
.border-right {
.border(right, 4px);
}
.border-left {
.border(left, 4px);
}
//
.border-radius (@r) {
both: @r * 10;
}
.border-radius (@r, left) {
left: @r;
}
.border-radius (@r, right) {
right: @r;
}
.only-right {
.border-radius(33, right);
}
.only-left {
.border-radius(33, left);
}
.left-right {
.border-radius(33);
}
.hola(hello, @hello...) {
color: blue;
}
#hola {
.hola(hello, world);
.hola(jello, world);
}
.resty(@hello, @world, @the_rest...) {
padding: @hello @world;
rest: @the_rest;
}
#nnn {
.body(10, 10, 10, 10, 10);
.body(10, 10, 10);
.body(10, 10);
.body(10);
.body();
}
.defaults(@aa, @bb:e343, @cc: "heah", ...) {
height: @aa;
}
#defaults_1 {
.defaults();
.defaults(one);
.defaults(two, one);
.defaults(three, two, one);
.defaults(four, three, two, one);
}
.thing() { color: green; }
.thing(...) { color: blue; }
.thing { color: red; }
#aa {
.thing();
}
#bb {
.thing;
}
#cc {
.thing(1);
}

View File

@@ -0,0 +1,40 @@
@a: 10;
@some {
@b: @a + 10;
div {
@c: @b + 10;
other {
@d: @c + 10;
world {
@e: @d + 10;
height: @e;
}
}
}
}
body {
@some;
}
@some;
.test(@x: 10) {
height: @x;
.test(@y: 11) {
height: @y;
.test(@z: 12) {
height: @z;
}
.test;
}
.test;
}
pre {
.test;
}

View File

@@ -0,0 +1,29 @@
@color: blue;
(~"something @{color}"), world {
color: blue;
}
.div {
@color: red;
(3434) {
height: 100px;
}
(~"cool @{color}") {
height: 4000px;
}
}
.heck(@a) { color: @a+10 }
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .heck(@index) }
.spanX(@index - 1);
}
.spanX (0) {}
.spanX (5);

View File

@@ -0,0 +1,120 @@
// these are the demos from the lessphp homepage
default {
@base: 24px;
@border-color: #B2B;
.underline { border-bottom: 1px solid green }
#header {
color: black;
border: 1px solid @border-color + #222222;
.navigation {
font-size: @base / 2;
a {
.underline;
}
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
}
variables {
@a: 2;
@x: @a * @a;
@y: @x + 1;
@z: @x * 2 + @y;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@b: @a * 10;
@c: #888;
@fonts: "Trebuchet MS", Verdana, sans-serif;
.variables {
width: @z + 1cm; // 14cm
height: @b + @x + 0px; // 24px
color: @c;
background: @light-blue;
font-family: @fonts;
}
}
mixins {
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
}
nested-rules {
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
}
namespaces {
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
}
#header a {
color: orange;
#bundle > .button; // mixin the button class
}
}
mixin-functions {
@outer: 10px;
@class(@var:22px, @car: 400px + @outer) {
margin: @var;
height: @car;
}
@group {
@f(@color) {
color: @color;
}
.cool {
border-bottom: 1px solid green;
}
}
.class(@width:200px) {
padding: @width;
}
body {
.class(2.0em);
@group > @f(red);
@class(10px, 10px + 2);
@group > .cool;
}
}

View File

@@ -0,0 +1,6 @@
.just-a-class { background: red; }
.some-mixin() {
height: 200px;
}

View File

@@ -0,0 +1,12 @@
.just-a-class { background: blue; }
.hello {
.some-mixin();
}
@media cool {
color: red;
.some-mixin();
}

View File

@@ -0,0 +1,16 @@
/**
* This is a test import file
*/
@colors {
div.bright {
color: red;
}
div.sad {
color: blue;
}
}

View File

@@ -0,0 +1,6 @@
b {
color: @color;
padding: 16px;
}

View File

@@ -0,0 +1,7 @@
h2 {
background: url("../images/logo.png") no-repeat;
}
@someValue: hello-from-file-3;

View File

@@ -0,0 +1,6 @@
.inner {
content: "inner/file1.less"
}
@import "file2"; // should get the one in inner

View File

@@ -0,0 +1,4 @@
.inner {
content: "inner/file2.less"
}

View File

@@ -0,0 +1,45 @@
@a: 2;
@x: @a * @a;
@y: @x + 1;
@z: @y + @x * 2;
@m: @z % @y;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@rgb-color: rgb(20%, 15%, 80%);
@rgba-color: rgba(23,68,149,0.5);
@b: @a * 10px;
@c: #888;
@fonts: "Trebuchet MS", Verdana, sans-serif;
.variables {
width: @z + 1cm; // 14cm
height: @b + @x + 0px; // 24px
margin-top: -@b; // -20px
margin-bottom: 10 - -@b; // 30px
@d: @c + #001;
color: @d;
background: @light-blue;
font-family: @fonts;
margin: @m + 0px; // 3px
font: 10px/12px serif;
font: 120%/120% serif;
}
.external {
color: @c;
border: 1px solid @rgb-color;
background: @rgba-color;
padding: @nonexistant + 4px;
}
@hello: 44px;
@something: "hello";
@cool: something;
color: @@something;
color: @@@cool;