first import
This commit is contained in:
@@ -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];
|
||||
}
|
||||
|
||||
|
77
sites/all/libraries/lessphp/tests/inputs/arity.less
Normal file
77
sites/all/libraries/lessphp/tests/inputs/arity.less
Normal 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);
|
||||
}
|
||||
|
||||
|
41
sites/all/libraries/lessphp/tests/inputs/attributes.less
Normal file
41
sites/all/libraries/lessphp/tests/inputs/attributes.less
Normal 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; }
|
||||
|
65
sites/all/libraries/lessphp/tests/inputs/builtins.less
Normal file
65
sites/all/libraries/lessphp/tests/inputs/builtins.less
Normal 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);
|
||||
}
|
||||
|
||||
|
139
sites/all/libraries/lessphp/tests/inputs/colors.less
Normal file
139
sites/all/libraries/lessphp/tests/inputs/colors.less
Normal 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;
|
||||
}
|
||||
|
||||
|
||||
|
@@ -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;
|
||||
}
|
15
sites/all/libraries/lessphp/tests/inputs/directives.less
Normal file
15
sites/all/libraries/lessphp/tests/inputs/directives.less
Normal 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 }
|
||||
|
||||
|
20
sites/all/libraries/lessphp/tests/inputs/escape.less
Normal file
20
sites/all/libraries/lessphp/tests/inputs/escape.less
Normal 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')";
|
||||
}
|
28
sites/all/libraries/lessphp/tests/inputs/font_family.less
Normal file
28
sites/all/libraries/lessphp/tests/inputs/font_family.less
Normal 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;
|
||||
}
|
||||
|
||||
|
88
sites/all/libraries/lessphp/tests/inputs/guards.less
Normal file
88
sites/all/libraries/lessphp/tests/inputs/guards.less
Normal 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));
|
||||
}
|
||||
|
6
sites/all/libraries/lessphp/tests/inputs/hacks.less
Normal file
6
sites/all/libraries/lessphp/tests/inputs/hacks.less
Normal file
@@ -0,0 +1,6 @@
|
||||
// css hacks
|
||||
|
||||
:root .alert-message, :root .btn {
|
||||
border-radius: 0 \0;
|
||||
}
|
||||
|
5
sites/all/libraries/lessphp/tests/inputs/hi.less
Normal file
5
sites/all/libraries/lessphp/tests/inputs/hi.less
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
div:before {
|
||||
content: "hi!";
|
||||
}
|
||||
|
12
sites/all/libraries/lessphp/tests/inputs/ie.less
Normal file
12
sites/all/libraries/lessphp/tests/inputs/ie.less
Normal 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);
|
||||
}
|
56
sites/all/libraries/lessphp/tests/inputs/import.less
vendored
Normal file
56
sites/all/libraries/lessphp/tests/inputs/import.less
vendored
Normal 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";
|
||||
|
52
sites/all/libraries/lessphp/tests/inputs/keyframes.less
Normal file
52
sites/all/libraries/lessphp/tests/inputs/keyframes.less
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
121
sites/all/libraries/lessphp/tests/inputs/math.less
Normal file
121
sites/all/libraries/lessphp/tests/inputs/math.less
Normal 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;
|
||||
}
|
||||
|
64
sites/all/libraries/lessphp/tests/inputs/media.less
Normal file
64
sites/all/libraries/lessphp/tests/inputs/media.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
93
sites/all/libraries/lessphp/tests/inputs/misc.less
Normal file
93
sites/all/libraries/lessphp/tests/inputs/misc.less
Normal 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;
|
||||
}
|
||||
|
@@ -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);
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
159
sites/all/libraries/lessphp/tests/inputs/mixins.less
Normal file
159
sites/all/libraries/lessphp/tests/inputs/mixins.less
Normal 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();
|
||||
}
|
||||
|
||||
|
60
sites/all/libraries/lessphp/tests/inputs/nested.less
Normal file
60
sites/all/libraries/lessphp/tests/inputs/nested.less
Normal 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;
|
||||
}
|
||||
}
|
||||
|
167
sites/all/libraries/lessphp/tests/inputs/pattern_matching.less
Normal file
167
sites/all/libraries/lessphp/tests/inputs/pattern_matching.less
Normal 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);
|
||||
}
|
||||
|
||||
|
||||
|
40
sites/all/libraries/lessphp/tests/inputs/scopes.less
Normal file
40
sites/all/libraries/lessphp/tests/inputs/scopes.less
Normal 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;
|
||||
}
|
||||
|
@@ -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);
|
||||
|
||||
|
120
sites/all/libraries/lessphp/tests/inputs/site_demos.less
Normal file
120
sites/all/libraries/lessphp/tests/inputs/site_demos.less
Normal 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;
|
||||
}
|
||||
}
|
||||
|
@@ -0,0 +1,6 @@
|
||||
.just-a-class { background: red; }
|
||||
|
||||
.some-mixin() {
|
||||
height: 200px;
|
||||
}
|
||||
|
12
sites/all/libraries/lessphp/tests/inputs/test-imports/b.less
Normal file
12
sites/all/libraries/lessphp/tests/inputs/test-imports/b.less
Normal file
@@ -0,0 +1,12 @@
|
||||
.just-a-class { background: blue; }
|
||||
|
||||
.hello {
|
||||
.some-mixin();
|
||||
}
|
||||
|
||||
|
||||
@media cool {
|
||||
color: red;
|
||||
.some-mixin();
|
||||
}
|
||||
|
@@ -0,0 +1,16 @@
|
||||
|
||||
|
||||
/**
|
||||
* This is a test import file
|
||||
*/
|
||||
|
||||
@colors {
|
||||
div.bright {
|
||||
color: red;
|
||||
}
|
||||
|
||||
div.sad {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
@@ -0,0 +1,6 @@
|
||||
|
||||
b {
|
||||
color: @color;
|
||||
padding: 16px;
|
||||
}
|
||||
|
@@ -0,0 +1,7 @@
|
||||
|
||||
h2 {
|
||||
background: url("../images/logo.png") no-repeat;
|
||||
}
|
||||
|
||||
@someValue: hello-from-file-3;
|
||||
|
@@ -0,0 +1,6 @@
|
||||
|
||||
.inner {
|
||||
content: "inner/file1.less"
|
||||
}
|
||||
|
||||
@import "file2"; // should get the one in inner
|
@@ -0,0 +1,4 @@
|
||||
|
||||
.inner {
|
||||
content: "inner/file2.less"
|
||||
}
|
45
sites/all/libraries/lessphp/tests/inputs/variables.less
Normal file
45
sites/all/libraries/lessphp/tests/inputs/variables.less
Normal 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;
|
||||
|
||||
|
Reference in New Issue
Block a user