mirror of
https://we.phorge.it/source/arcanist.git
synced 2024-11-10 08:52:39 +01:00
Fix failing unit tests for ArcanistLesscLinter
Summary: A bunch of unit tests are failing with the latest version of `lessc` (v2.3.0). I decided to delete a bunch of test cases for this linter as we have far too many at the moment. Test Plan: `arc unit` Reviewers: chad, #blessed_reviewers, epriestley Reviewed By: #blessed_reviewers, epriestley Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11521
This commit is contained in:
Joshua Spence
parent
d4ed44682d
commit
edc60cefc4
71 changed files with 3 additions and 2426 deletions
|
|
@ -1,99 +0,0 @@
|
|||
#yelow {
|
||||
#short {
|
||||
color: #fea;
|
||||
}
|
||||
#long {
|
||||
color: #ffeeaa;
|
||||
}
|
||||
#rgba {
|
||||
color: rgba(255, 238, 170, 0.1);
|
||||
}
|
||||
#argb {
|
||||
color: argb(rgba(255, 238, 170, 0.1));
|
||||
}
|
||||
}
|
||||
|
||||
#blue {
|
||||
#short {
|
||||
color: #00f;
|
||||
}
|
||||
#long {
|
||||
color: #0000ff;
|
||||
}
|
||||
#rgba {
|
||||
color: rgba(0, 0, 255, 0.1);
|
||||
}
|
||||
#argb {
|
||||
color: argb(rgba(0, 0, 255, 0.1));
|
||||
}
|
||||
}
|
||||
|
||||
#alpha #hsla {
|
||||
color: hsla(11, 20%, 20%, 0.6);
|
||||
}
|
||||
|
||||
#overflow {
|
||||
.a { color: (#111111 - #444444); } // #000000
|
||||
.b { color: (#eee + #fff); } // #ffffff
|
||||
.c { color: (#aaa * 3); } // #ffffff
|
||||
.d { color: (#00ee00 + #009900); } // #00ff00
|
||||
.e { color: rgba(-99.9, 31.4159, 321, 0.42); }
|
||||
}
|
||||
|
||||
#grey {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
#333333 {
|
||||
color: rgb(20%, 20%, 20%);
|
||||
}
|
||||
|
||||
#808080 {
|
||||
color: hsl(50, 0%, 50%);
|
||||
}
|
||||
|
||||
#00ff00 {
|
||||
color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.lightenblue {
|
||||
color: lighten(blue, 10%);
|
||||
}
|
||||
|
||||
.darkenblue {
|
||||
color: darken(blue, 10%);
|
||||
}
|
||||
|
||||
.unknowncolors {
|
||||
color: blue2;
|
||||
border: 2px solid superred;
|
||||
}
|
||||
|
||||
.transparent {
|
||||
color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
#alpha {
|
||||
@colorvar: rgba(150, 200, 150, 0.7);
|
||||
#fromvar {
|
||||
opacity: alpha(@colorvar);
|
||||
}
|
||||
#short {
|
||||
opacity: alpha(#aaa);
|
||||
}
|
||||
#long {
|
||||
opacity: alpha(#bababa);
|
||||
}
|
||||
#rgba {
|
||||
opacity: alpha(rgba(50, 120, 95, 0.2));
|
||||
}
|
||||
#hsl {
|
||||
opacity: alpha(hsl(120, 100%, 50%));
|
||||
}
|
||||
}
|
||||
|
||||
#percentage {
|
||||
color: red(rgb(100%, 0, 0));
|
||||
border-color: rgba(100%, 0, 0, 50%);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
/******************\
|
||||
* *
|
||||
* Comment Header *
|
||||
* *
|
||||
\******************/
|
||||
|
||||
/*
|
||||
|
||||
Comment
|
||||
|
||||
*/
|
||||
|
||||
/*
|
||||
* Comment Test
|
||||
*
|
||||
* - cloudhead (http://cloudhead.net)
|
||||
*
|
||||
*/
|
||||
|
||||
////////////////
|
||||
@var: "content";
|
||||
////////////////
|
||||
|
||||
/* Colors
|
||||
* ------
|
||||
* #EDF8FC (background blue)
|
||||
* #166C89 (darkest blue)
|
||||
*
|
||||
* Text:
|
||||
* #333 (standard text) // A comment within a comment!
|
||||
* #1F9EC9 (standard link)
|
||||
*
|
||||
*/
|
||||
|
||||
/* @group Variables
|
||||
------------------- */
|
||||
#comments /* boo *//* boo again*/,
|
||||
//.commented_out1
|
||||
//.commented_out2
|
||||
//.commented_out3
|
||||
.comments //end of comments1
|
||||
//end of comments2
|
||||
{
|
||||
/**/ // An empty comment
|
||||
color: red; /* A C-style comment */ /* A C-style comment */
|
||||
background-color: orange; // A little comment
|
||||
font-size: 12px;
|
||||
|
||||
/* lost comment */ content: @var;
|
||||
|
||||
border: 1px solid black;
|
||||
|
||||
// padding & margin //
|
||||
padding: 0; // }{ '"
|
||||
margin: 2em;
|
||||
} //
|
||||
|
||||
/* commented out
|
||||
#more-comments {
|
||||
color: grey;
|
||||
}
|
||||
*/
|
||||
|
||||
.selector /* .with */, .lots, /* of */ .comments {
|
||||
color: grey, /* blue */ orange;
|
||||
-webkit-border-radius: 2px /* webkit only */;
|
||||
-moz-border-radius: (2px * 4) /* moz only with operation */;
|
||||
}
|
||||
|
||||
.mixin_def_with_colors(@a: white, // in
|
||||
@b: 1px //put in @b - causes problems! --->
|
||||
) // the
|
||||
when (@a = white) {
|
||||
.test {
|
||||
color: @b;
|
||||
}
|
||||
}
|
||||
.mixin_def_with_colors();
|
||||
|
||||
#last { color: blue }
|
||||
//
|
||||
|
||||
/* *//* { *//* *//* *//* */#div { color:#A33; }/* } */
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
.comma-delimited {
|
||||
text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
|
||||
-moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
|
||||
0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
|
||||
-webkit-transform: rotate(-0.0000000001deg);
|
||||
}
|
||||
@font-face {
|
||||
font-family: Headline;
|
||||
unicode-range: U+??????, U+0???, U+0-7F, U+A5;
|
||||
}
|
||||
.other {
|
||||
-moz-transform: translate(0, 11em) rotate(-90deg);
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
.item[data-cra_zy-attr1b-ut3=bold] {
|
||||
font-weight: bold;
|
||||
}
|
||||
p:not([class*="lead"]) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
input[type="text"].class#id[attr=32]:not(1) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
div#id.class[a=1][b=2].class:not(1) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
ul.comma > li:not(:only-child)::after {
|
||||
color: white;
|
||||
}
|
||||
|
||||
ol.comma > li:nth-last-child(2)::after {
|
||||
color: white;
|
||||
}
|
||||
|
||||
li:nth-child(4n+1),
|
||||
li:nth-child(-5n),
|
||||
li:nth-child(-n+2) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a[href^="http://"] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
a[href$="http://"] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
form[data-disabled] {
|
||||
color: black;
|
||||
}
|
||||
|
||||
p::before {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#issue322 {
|
||||
-webkit-animation: anim2 7s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes frames {
|
||||
0% { border: 1px }
|
||||
5.5% { border: 2px }
|
||||
100% { border: 3px }
|
||||
}
|
||||
|
||||
@keyframes fontbulger1 {
|
||||
to {
|
||||
font-size: 15px;
|
||||
}
|
||||
from,to {
|
||||
font-size: 12px;
|
||||
}
|
||||
0%,100% {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.units {
|
||||
font: 1.2rem/2rem;
|
||||
font: 8vw/9vw;
|
||||
font: 10vh/12vh;
|
||||
font: 12vm/15vm;
|
||||
font: 12vmin/15vmin;
|
||||
font: 1.2ch/1.5ch;
|
||||
}
|
||||
|
||||
@supports ( box-shadow: 2px 2px 2px black ) or
|
||||
( -moz-box-shadow: 2px 2px 2px black ) {
|
||||
.outline {
|
||||
box-shadow: 2px 2px 2px black;
|
||||
-moz-box-shadow: 2px 2px 2px black;
|
||||
}
|
||||
}
|
||||
|
||||
@-x-document url-prefix(""github.com"") {
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
@viewport {
|
||||
font-size: 10px;
|
||||
}
|
||||
@namespace foo url(http://www.example.com);
|
||||
|
||||
foo|h1 { color: blue; }
|
||||
foo|* { color: yellow; }
|
||||
|h1 { color: red; }
|
||||
*|h1 { color: green; }
|
||||
h1 { color: green; }
|
||||
.upper-test {
|
||||
UpperCaseProperties: allowed;
|
||||
}
|
||||
@host {
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
::distributed(input::placeholder) {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.shadow ^ .dom,
|
||||
body ^^ .shadow {
|
||||
display: done;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
@ugly: fuchsia;
|
||||
|
||||
.escape\|random\|char {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.mixin\!tUp {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// class="404"
|
||||
.\34 04 {
|
||||
background: red;
|
||||
|
||||
strong {
|
||||
color: @ugly;
|
||||
.mixin\!tUp;
|
||||
}
|
||||
}
|
||||
|
||||
.trailingTest\+ {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* This hideous test of hideousness checks for the selector "blockquote" with various permutations of hex escapes */
|
||||
\62\6c\6f \63 \6B \0071 \000075o\74 e {
|
||||
color: silver;
|
||||
}
|
||||
|
||||
[ng\:cloak],
|
||||
ng\:form {
|
||||
display: none;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
|
||||
.light when (lightness(@a) > 50%) {
|
||||
color: green;
|
||||
}
|
||||
.dark when (lightness(@a) < 50%) {
|
||||
color: orange;
|
||||
}
|
||||
@a: #ddd;
|
||||
|
||||
.see-the {
|
||||
@a: #444; // this mirrors what mixins do - they evaluate guards at the point of execution
|
||||
.light();
|
||||
.dark();
|
||||
}
|
||||
|
||||
.hide-the {
|
||||
.light();
|
||||
.dark();
|
||||
}
|
||||
|
||||
.multiple-conditions-1 when (@b = 1), (@c = 2), (@d = 3) {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.multiple-conditions-2 when (@b = 1), (@c = 2), (@d = 2) {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
@b: 2;
|
||||
@c: 3;
|
||||
@d: 3;
|
||||
|
||||
.inheritance when (@b = 2) {
|
||||
.test {
|
||||
color: black;
|
||||
}
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
.hideme when (@b = 1) {
|
||||
color: green;
|
||||
}
|
||||
& when (@b = 1) {
|
||||
hideme: green;
|
||||
}
|
||||
}
|
||||
|
||||
.hideme when (@b = 1) {
|
||||
.test {
|
||||
color: black;
|
||||
}
|
||||
&:hover {
|
||||
color: pink;
|
||||
}
|
||||
.hideme when (@b = 1) {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
|
||||
& when (@b = 1) {
|
||||
.hideme {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
@ruleset: {
|
||||
color: black;
|
||||
background: white;
|
||||
};
|
||||
|
||||
@a: 1px;
|
||||
.wrap-mixin(@ruleset) {
|
||||
@a: hidden and if you see this in the output its a bug;
|
||||
@b: visible;
|
||||
@d: magic-frame; // same behaviour as mixin calls - falls back to this frame
|
||||
.wrap-selector {
|
||||
@c: visible;
|
||||
@ruleset();
|
||||
visible-one: @b;
|
||||
visible-two: @c;
|
||||
}
|
||||
};
|
||||
|
||||
.wrap-mixin({
|
||||
color: black;
|
||||
one: @a;
|
||||
@b: hidden and if you see this in the output its a bug;
|
||||
@c: hidden and if you see this in the output its a bug;
|
||||
four: @d;
|
||||
});
|
||||
|
||||
.wrap-mixin(@ruleset: {
|
||||
color: red;
|
||||
});
|
||||
|
||||
.wrap-mixin(@ruleset);
|
||||
|
||||
.desktop-and-old-ie(@rules) {
|
||||
@media screen and (min-width: 1200) { @rules(); }
|
||||
html.lt-ie9 & { @rules(); }
|
||||
}
|
||||
|
||||
header {
|
||||
background: blue;
|
||||
|
||||
.desktop-and-old-ie({
|
||||
background: red;
|
||||
});
|
||||
}
|
||||
|
||||
.wrap-mixin-calls-wrap(@ruleset) {
|
||||
.wrap-mixin(@ruleset);
|
||||
};
|
||||
|
||||
.wrap-mixin({
|
||||
test: extra-wrap;
|
||||
.wrap-mixin-calls-wrap({
|
||||
test: wrapped-twice;
|
||||
});
|
||||
});
|
||||
|
||||
.wrap-mixin({
|
||||
test-func: unit(90px);
|
||||
test-arithmetic: unit((9+9), px);
|
||||
});
|
||||
// without mixins
|
||||
@ruleset-2: {
|
||||
b: 1;
|
||||
};
|
||||
.without-mixins {
|
||||
@ruleset-2();
|
||||
}
|
||||
@my-ruleset: {
|
||||
.my-selector {
|
||||
@media tv {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
};
|
||||
@media (orientation:portrait) {
|
||||
@my-ruleset();
|
||||
.wrap-media-mixin({
|
||||
@media tv {
|
||||
.triple-wrapped-mq {
|
||||
triple: true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
.wrap-media-mixin(@ruleset) {
|
||||
@media widescreen {
|
||||
@media print {
|
||||
@ruleset();
|
||||
}
|
||||
@ruleset();
|
||||
}
|
||||
@ruleset();
|
||||
}
|
||||
// unlocking mixins
|
||||
@my-mixins: {
|
||||
.mixin() {
|
||||
test: test;
|
||||
}
|
||||
};
|
||||
@my-mixins();
|
||||
.a {
|
||||
.mixin();
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.a {
|
||||
error: ((1px * 2px) + (3em * 3px));
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
~~~~~~~~~~
|
||||
~~~~~~~~~~
|
||||
{"config":{"lessc.strict-units":true}}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
@keyframes @name {
|
||||
50% {width: 20px;}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:12
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@@demo: "hi";
|
||||
~~~~~~~~~~
|
||||
error:1:1
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#gaga /* Comment */ span { color: red }
|
||||
~~~~~~~~~~
|
||||
error:1:21
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
selector when (default()) {
|
||||
color: red;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:16
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@a: {
|
||||
b: 1;
|
||||
};
|
||||
.a {
|
||||
a: @a;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:5:3
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@a: {
|
||||
b: 1;
|
||||
};
|
||||
.a {
|
||||
a: @a();
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:5:3
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@a: {
|
||||
b: 1;
|
||||
};
|
||||
@a();
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.mixin-definition(@a: {
|
||||
b: 1;
|
||||
}) {
|
||||
@a();
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:18
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.mixin-definition(@b) {
|
||||
@a();
|
||||
}
|
||||
.mixin-definition({color: red;});
|
||||
~~~~~~~~~~
|
||||
error:4:1
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.a {
|
||||
b: {
|
||||
color: red;
|
||||
};
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
:extend(.a all) {
|
||||
property: red;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:17
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a:extend(.b all).c {
|
||||
property: red;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:21
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "this-statement-is-invalid.less"
|
||||
~~~~~~~~~~
|
||||
error:1:1
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
var: `this.foo.toJS()`;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:27
|
||||
error:2:10
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
@a: `@{b}`;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:15
|
||||
error:2:9
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
.mixin(@a : 4, @b : 3, @c: 2) {
|
||||
will: fail;
|
||||
}
|
||||
.mixin-test {
|
||||
.mixin(@a: 5; @b: 6, @c: 7);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:5:30
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.mixin(@a : 4, @b : 3, @c: 2) {
|
||||
will: fail;
|
||||
}
|
||||
.mixin-test {
|
||||
.mixin(@a: 5, @b: 6; @c: 7);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:5:26
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
|
||||
.error-is-further-on() {
|
||||
}
|
||||
|
||||
.pad-here-to-reproduce-error-in() {
|
||||
}
|
||||
|
||||
.the-import-subfolder-test() {
|
||||
}
|
||||
|
||||
.mixin-not-defined();
|
||||
~~~~~~~~~~
|
||||
error:11:1
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@saxofon:trumpete;
|
||||
|
||||
.mixin(saxofon) {
|
||||
}
|
||||
|
||||
.mixin(@saxofon);
|
||||
~~~~~~~~~~
|
||||
error:6:1
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@saxofon:trumpete;
|
||||
|
||||
.mixin(@a, @b) {
|
||||
}
|
||||
|
||||
.mixin(@a: @saxofon);
|
||||
~~~~~~~~~~
|
||||
error:6:1
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
guard-default-func-conflict {
|
||||
.m(@x, 1) {}
|
||||
.m(@x, 2) when (default()) {}
|
||||
.m(@x, 2) when (default()) {}
|
||||
|
||||
.m(1, 1);
|
||||
.m(1, 2);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:8:5
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
guard-default-func-conflict {
|
||||
.m(1) {}
|
||||
.m(@x) when not(default()) {}
|
||||
.m(@x) when (@x = 3) and (default()) {}
|
||||
|
||||
.m(2);
|
||||
.m(3);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:8:5
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
|
||||
guard-default-func-conflict {
|
||||
.m(1) {}
|
||||
.m(@x) when not(default()) {}
|
||||
.m(@x) when not(default()) {}
|
||||
|
||||
.m(1);
|
||||
.m(2);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:8:5
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@ie8: true;
|
||||
.a when (@ie8 = true),
|
||||
.b {
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:3:1
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@ie8: true;
|
||||
.a,
|
||||
.b when (@ie8 = true) {
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:3:23
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
something: (12 * (13 + 5 -23));
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:28
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
something: (12 + (13 + 10 -23));
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:29
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@media (extra: bracket)) {
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:24
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
body {
|
||||
background-color: #fff;
|
||||
~~~~~~~~~~
|
||||
error:1:6
|
||||
error:3:1
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
@media (missing: bracket {
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:8
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
error: calc(1 %);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
a {
|
||||
* : 1;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:5
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.test {
|
||||
display/*/: block; /*sorry for IE5*/
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.a() {
|
||||
prop:1;
|
||||
}
|
||||
.a();
|
||||
~~~~~~~~~~
|
||||
error:2:3
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
prop:1;
|
||||
.a {
|
||||
prop:1;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:1:1
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
a {outline-@{color}: green}
|
||||
~~~~~~~~~~
|
||||
error:1:12
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
a: svg-gradient(horizontal, black, white);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:6
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
a: svg-gradient(to bottom, black, orange, 45%, white);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:6
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.a {
|
||||
a: svg-gradient(black, orange);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
error:2:6
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
//very simple chaining
|
||||
.a {
|
||||
color: black;
|
||||
}
|
||||
.b:extend(.a) {}
|
||||
.c:extend(.b) {}
|
||||
|
||||
//very simple chaining, ordering not important
|
||||
|
||||
.d:extend(.e) {}
|
||||
.e:extend(.f) {}
|
||||
.f {
|
||||
color: black;
|
||||
}
|
||||
|
||||
//extend with all
|
||||
|
||||
.g.h {
|
||||
color: black;
|
||||
}
|
||||
.i.j:extend(.g all) {
|
||||
color: white;
|
||||
}
|
||||
.k:extend(.i all) {}
|
||||
|
||||
//extend multi-chaining
|
||||
|
||||
.l {
|
||||
color: black;
|
||||
}
|
||||
.m:extend(.l){}
|
||||
.n:extend(.m){}
|
||||
.o:extend(.n){}
|
||||
.p:extend(.o){}
|
||||
.q:extend(.p){}
|
||||
.r:extend(.q){}
|
||||
.s:extend(.r){}
|
||||
.t:extend(.s){}
|
||||
|
||||
// self referencing is ignored
|
||||
|
||||
.u {color: black;}
|
||||
.v.u.v:extend(.u all){}
|
||||
|
||||
// circular reference because the new extend product will match the existing extend
|
||||
|
||||
.w:extend(.w) {color: black;}
|
||||
.v.w.v:extend(.w all){}
|
||||
|
||||
// classic circular references
|
||||
|
||||
.x:extend(.z) {
|
||||
color: x;
|
||||
}
|
||||
.y:extend(.x) {
|
||||
color: y;
|
||||
}
|
||||
.z:extend(.y) {
|
||||
color: z;
|
||||
}
|
||||
|
||||
//very simple chaining, but with the extend inside the ruleset
|
||||
.va {
|
||||
color: black;
|
||||
}
|
||||
.vb {
|
||||
&:extend(.va);
|
||||
color: white;
|
||||
}
|
||||
.vc {
|
||||
&:extend(.vb);
|
||||
}
|
||||
|
||||
// media queries - dont extend outside, do extend inside
|
||||
|
||||
@media tv {
|
||||
.ma:extend(.a,.b,.c,.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o,.p,.q,.r,.s,.t,.u,.v,.w,.x,.y,.z,.md) {
|
||||
color: black;
|
||||
}
|
||||
.md {
|
||||
color: white;
|
||||
}
|
||||
@media plasma {
|
||||
.me, .mf {
|
||||
&:extend(.mb,.md);
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mb:extend(.ma) {};
|
||||
.mc:extend(.mb) {};
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.clearfix {
|
||||
*zoom: 1;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.foo {
|
||||
&:extend(.clearfix all);
|
||||
color: red;
|
||||
}
|
||||
|
||||
.bar {
|
||||
&:extend(.clearfix all);
|
||||
color: blue;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.replace.replace,
|
||||
.c.replace + .replace {
|
||||
.replace,
|
||||
.c {
|
||||
prop: copy-paste-replace;
|
||||
}
|
||||
}
|
||||
.rep_ace:extend(.replace.replace .replace) {}
|
||||
|
||||
.a .b .c {
|
||||
prop: not_effected;
|
||||
}
|
||||
|
||||
.a {
|
||||
prop: is_effected;
|
||||
.b {
|
||||
prop: not_effected;
|
||||
}
|
||||
.b.c {
|
||||
prop: not_effected;
|
||||
}
|
||||
}
|
||||
|
||||
.c, .a {
|
||||
.b, .a {
|
||||
.a, .c {
|
||||
prop: not_effected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.effected {
|
||||
&:extend(.a);
|
||||
&:extend(.b);
|
||||
&:extend(.c);
|
||||
}
|
||||
|
||||
.e {
|
||||
&& {
|
||||
prop: extend-double;
|
||||
&:hover {
|
||||
hover: not-extended;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dbl:extend(.e.e) {}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.ext1 .ext2 {
|
||||
background: black;
|
||||
}
|
||||
|
||||
@media tv {
|
||||
.ext1 .ext3 {
|
||||
color: white;
|
||||
}
|
||||
.tv-lowres :extend(.ext1 all) {
|
||||
background: blue;
|
||||
}
|
||||
@media hires {
|
||||
.ext1 .ext4 {
|
||||
color: green;
|
||||
}
|
||||
.tv-hires :extend(.ext1 all) {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all:extend(.ext1 all) {
|
||||
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.sidebar {
|
||||
width: 300px;
|
||||
background: red;
|
||||
|
||||
.box {
|
||||
background: #FFF;
|
||||
border: 1px solid #000;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar2 {
|
||||
&:extend(.sidebar all);
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.type1 {
|
||||
.sidebar3 {
|
||||
&:extend(.sidebar all);
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
|
||||
.type2 {
|
||||
&.sidebar4 {
|
||||
&:extend(.sidebar all);
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: black;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
&:extend(.button);
|
||||
&:hover:extend(.button:hover) {}
|
||||
}
|
||||
|
||||
.nomatch {
|
||||
&:hover:extend(.button :hover) {}
|
||||
}
|
||||
|
||||
.button2 {
|
||||
:hover {
|
||||
nested: white;
|
||||
}
|
||||
}
|
||||
.button2 :hover {
|
||||
notnested: black;
|
||||
}
|
||||
|
||||
.nomatch :extend(.button2:hover) {}
|
||||
|
||||
.amp-test-a,
|
||||
.amp-test-b {
|
||||
.amp-test-c &.amp-test-d&.amp-test-e {
|
||||
.amp-test-f&+&.amp-test-g:extend(.amp-test-h) {}
|
||||
}
|
||||
}
|
||||
.amp-test-h {
|
||||
test: extended by masses of selectors;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
.error {
|
||||
border: 1px #f00;
|
||||
background: #fdd;
|
||||
}
|
||||
.error.intrusion {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.intrusion .error {
|
||||
display: none;
|
||||
}
|
||||
.badError:extend(.error all) {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.foo .bar, .foo .baz {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ext1 .ext2
|
||||
:extend(.foo all) {
|
||||
}
|
||||
|
||||
.ext3:extend(.foo all),
|
||||
.ext4:extend(.foo all) {
|
||||
}
|
||||
|
||||
div.ext5,
|
||||
.ext6 > .ext5 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.should-not-exist-in-output,
|
||||
.ext7:extend(.ext5 all) {
|
||||
}
|
||||
|
||||
.ext {
|
||||
test: 1;
|
||||
}
|
||||
// same as
|
||||
// .a .c:extend(.ext all)
|
||||
// .b .c:extend(.ext all)
|
||||
// .a .c .d
|
||||
// .b .c .d
|
||||
.a, .b {
|
||||
test: 2;
|
||||
.c:extend(.ext all) {
|
||||
test: 3;
|
||||
.d {
|
||||
test: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.replace.replace,
|
||||
.c.replace + .replace {
|
||||
.replace,
|
||||
.c {
|
||||
prop: copy-paste-replace;
|
||||
}
|
||||
}
|
||||
.rep_ace:extend(.replace all) {}
|
||||
|
||||
.attributes {
|
||||
[data="test"] {
|
||||
extend: attributes;
|
||||
}
|
||||
.attribute-test {
|
||||
&:extend([data="test"] all);
|
||||
}
|
||||
[data] {
|
||||
extend: attributes2;
|
||||
}
|
||||
.attribute-test2 {
|
||||
&:extend([data] all); //you could argue it should match [data="test"]... not for now though...
|
||||
}
|
||||
@attr-data: "test3";
|
||||
[data=@{attr-data}] {
|
||||
extend: attributes2;
|
||||
}
|
||||
.attribute-test {
|
||||
&:extend([data="test3"] all);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
.header-nav {
|
||||
background: red;
|
||||
&:before {
|
||||
background: blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.footer-nav {
|
||||
&:extend( .header .header-nav all );
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
.error {
|
||||
border: 1px #f00;
|
||||
background: #fdd;
|
||||
}
|
||||
.error.intrusion {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.intrusion .error {
|
||||
display: none;
|
||||
}
|
||||
.badError {
|
||||
&:extend(.error all);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.foo .bar, .foo .baz {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ext1 .ext2 {
|
||||
&:extend(.foo all);
|
||||
}
|
||||
|
||||
.ext3,
|
||||
.ext4 {
|
||||
&:extend(.foo all);
|
||||
&:extend(.bar all);
|
||||
}
|
||||
|
||||
div.ext5,
|
||||
.ext6 > .ext5 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.ext7 {
|
||||
&:extend(.ext5 all);
|
||||
}
|
||||
|
||||
.ext8.ext9 {
|
||||
result: add-foo;
|
||||
}
|
||||
.ext8 .ext9,
|
||||
.ext8 + .ext9,
|
||||
.ext8 > .ext9 {
|
||||
result: bar-matched;
|
||||
}
|
||||
.ext8.nomatch {
|
||||
result: none;
|
||||
}
|
||||
.ext8 {
|
||||
.ext9 {
|
||||
result: match-nested-bar;
|
||||
}
|
||||
}
|
||||
.ext8 {
|
||||
&.ext9 {
|
||||
result: match-nested-foo;
|
||||
}
|
||||
}
|
||||
|
||||
.fuu:extend(.ext8.ext9 all) {}
|
||||
.buu:extend(.ext8 .ext9 all) {}
|
||||
.zap:extend(.ext8 + .ext9 all) {}
|
||||
.zoo:extend(.ext8 > .ext9 all) {}
|
||||
|
||||
.aa {
|
||||
color: black;
|
||||
.dd {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
.bb {
|
||||
background: red;
|
||||
.bb {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
.cc:extend(.aa,.bb) {}
|
||||
.ee:extend(.dd all,.bb) {}
|
||||
.ff:extend(.dd,.bb all) {}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@fat: 0;
|
||||
@cloudhead: "#000000";
|
||||
|
||||
.nav {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 20);
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=@fat);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333", endColorstr=@cloudhead, GradientType=@fat);
|
||||
}
|
||||
.evalTest(@arg) {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=@arg);
|
||||
}
|
||||
.evalTest1 {
|
||||
.evalTest(30);
|
||||
.evalTest(5);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@var: @a;
|
||||
@a: 100%;
|
||||
|
||||
.lazy-eval {
|
||||
width: @var;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.first-transform() {
|
||||
transform+: rotate(90deg), skew(30deg);
|
||||
}
|
||||
.second-transform() {
|
||||
transform+: scale(2,4);
|
||||
}
|
||||
.third-transform() {
|
||||
transform: scaleX(45deg);
|
||||
}
|
||||
.fourth-transform() {
|
||||
transform+: scaleX(45deg);
|
||||
}
|
||||
.fifth-transform() {
|
||||
transform+: scale(2,4) !important;
|
||||
}
|
||||
.first-background() {
|
||||
background+: url(data://img1.png);
|
||||
}
|
||||
.second-background() {
|
||||
background+: url(data://img2.png);
|
||||
}
|
||||
|
||||
.test1 {
|
||||
// Can merge values
|
||||
.first-transform();
|
||||
.second-transform();
|
||||
}
|
||||
.test2 {
|
||||
// Wont merge values without +: merge directive, for backwards compatibility with css
|
||||
.first-transform();
|
||||
.third-transform();
|
||||
}
|
||||
.test3 {
|
||||
// Wont merge values from two sources with different properties
|
||||
.fourth-transform();
|
||||
.first-background();
|
||||
}
|
||||
.test4 {
|
||||
// Wont merge values from sources that merked as !important, for backwards compatibility with css
|
||||
.first-transform();
|
||||
.fifth-transform();
|
||||
}
|
||||
.test5 {
|
||||
// Wont merge values from mixins that merked as !important, for backwards compatibility with css
|
||||
.first-transform();
|
||||
.second-transform() !important;
|
||||
}
|
||||
.test6 {
|
||||
// Ignores !merge if no peers found
|
||||
.second-transform();
|
||||
}
|
||||
|
||||
.test-interleaved {
|
||||
transform+: t1;
|
||||
background+: b1;
|
||||
transform+: t2;
|
||||
background+: b2, b3;
|
||||
transform+: t3;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,216 +0,0 @@
|
|||
.mixin (@a: 1px, @b: 50%) {
|
||||
width: (@a * 5);
|
||||
height: (@b - 1%);
|
||||
}
|
||||
|
||||
.mixina (@style, @width, @color: black) {
|
||||
border: @width @style @color;
|
||||
}
|
||||
|
||||
.mixiny
|
||||
(@a: 0, @b: 0) {
|
||||
margin: @a;
|
||||
padding: @b;
|
||||
}
|
||||
|
||||
.hidden() {
|
||||
color: transparent; // asd
|
||||
}
|
||||
|
||||
#hidden {
|
||||
.hidden;
|
||||
}
|
||||
|
||||
#hidden1 {
|
||||
.hidden();
|
||||
}
|
||||
|
||||
.two-args {
|
||||
color: blue;
|
||||
.mixin(2px, 100%);
|
||||
.mixina(dotted, 2px);
|
||||
}
|
||||
|
||||
.one-arg {
|
||||
.mixin(3px);
|
||||
}
|
||||
|
||||
.no-parens {
|
||||
.mixin;
|
||||
}
|
||||
|
||||
.no-args {
|
||||
.mixin();
|
||||
}
|
||||
|
||||
.var-args {
|
||||
@var: 9;
|
||||
.mixin(@var, (@var * 2));
|
||||
}
|
||||
|
||||
.multi-mix {
|
||||
.mixin(2px, 30%);
|
||||
.mixiny(4, 5);
|
||||
}
|
||||
|
||||
.maxa(@arg1: 10, @arg2: #f00) {
|
||||
padding: (@arg1 * 2px);
|
||||
color: @arg2;
|
||||
}
|
||||
|
||||
body {
|
||||
.maxa(15);
|
||||
}
|
||||
|
||||
@glob: 5;
|
||||
.global-mixin(@a:2) {
|
||||
width: (@glob + @a);
|
||||
}
|
||||
|
||||
.scope-mix {
|
||||
.global-mixin(3);
|
||||
}
|
||||
|
||||
.nested-ruleset (@width: 200px) {
|
||||
width: @width;
|
||||
.column { margin: @width; }
|
||||
}
|
||||
.content {
|
||||
.nested-ruleset(600px);
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.same-var-name2(@radius) {
|
||||
radius: @radius;
|
||||
}
|
||||
.same-var-name(@radius) {
|
||||
.same-var-name2(@radius);
|
||||
}
|
||||
#same-var-name {
|
||||
.same-var-name(5px);
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.var-inside () {
|
||||
@var: 10px;
|
||||
width: @var;
|
||||
}
|
||||
#var-inside { .var-inside; }
|
||||
|
||||
.mixin-arguments (@width: 0px, ...) {
|
||||
border: @arguments;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.arguments {
|
||||
.mixin-arguments(1px, solid, black);
|
||||
}
|
||||
.arguments2 {
|
||||
.mixin-arguments();
|
||||
}
|
||||
.arguments3 {
|
||||
.mixin-arguments;
|
||||
}
|
||||
|
||||
.mixin-arguments2 (@width, @rest...) {
|
||||
border: @arguments;
|
||||
rest: @rest;
|
||||
width: @width;
|
||||
}
|
||||
.arguments4 {
|
||||
.mixin-arguments2(0, 1, 2, 3, 4);
|
||||
}
|
||||
|
||||
// Edge cases
|
||||
|
||||
.edge-case {
|
||||
.mixin-arguments("{");
|
||||
}
|
||||
|
||||
// Division vs. Literal Slash
|
||||
.border-radius(@r: 2px/5px) {
|
||||
border-radius: @r;
|
||||
}
|
||||
.slash-vs-math {
|
||||
.border-radius();
|
||||
.border-radius(5px/10px);
|
||||
.border-radius((3px * 2));
|
||||
}
|
||||
// semi-colon vs comma for delimiting
|
||||
|
||||
.mixin-takes-one(@a) {
|
||||
one: @a;
|
||||
}
|
||||
|
||||
.mixin-takes-two(@a; @b) {
|
||||
one: @a;
|
||||
two: @b;
|
||||
}
|
||||
|
||||
.comma-vs-semi-colon {
|
||||
.mixin-takes-two(@a : a; @b : b, c);
|
||||
.mixin-takes-two(@a : d, e; @b : f);
|
||||
.mixin-takes-one(@a: g);
|
||||
.mixin-takes-one(@a : h;);
|
||||
.mixin-takes-one(i);
|
||||
.mixin-takes-one(j;);
|
||||
.mixin-takes-two(k, l);
|
||||
.mixin-takes-one(m, n;);
|
||||
.mixin-takes-two(o, p; q);
|
||||
.mixin-takes-two(r, s; t;);
|
||||
}
|
||||
|
||||
.mixin-conflict(@a:defA, @b:defB, @c:defC) {
|
||||
three: @a, @b, @c;
|
||||
}
|
||||
|
||||
.mixin-conflict(@a:defA, @b:defB, @c:defC, @d:defD) {
|
||||
four: @a, @b, @c, @d;
|
||||
}
|
||||
|
||||
#named-conflict {
|
||||
.mixin-conflict(11, 12, 13, @a:a);
|
||||
.mixin-conflict(@a:a, 21, 22, 23);
|
||||
}
|
||||
@a: 3px;
|
||||
.mixin-default-arg(@a: 1px, @b: @a, @c: @b) {
|
||||
defaults: 1px 1px 1px;
|
||||
defaults: 2px 2px 2px;
|
||||
}
|
||||
|
||||
.test-mixin-default-arg {
|
||||
.mixin-default-arg();
|
||||
.mixin-default-arg(2px);
|
||||
}
|
||||
|
||||
.mixin-comma-default1(@color; @padding; @margin: 2, 2, 2, 2) {
|
||||
margin: @margin;
|
||||
}
|
||||
.selector {
|
||||
.mixin-comma-default1(#33acfe; 4);
|
||||
}
|
||||
.mixin-comma-default2(@margin: 2, 2, 2, 2;) {
|
||||
margin: @margin;
|
||||
}
|
||||
.selector2 {
|
||||
.mixin-comma-default2();
|
||||
}
|
||||
.mixin-comma-default3(@margin: 2, 2, 2, 2) {
|
||||
margin: @margin;
|
||||
}
|
||||
.selector3 {
|
||||
.mixin-comma-default3(4,2,2,2);
|
||||
}
|
||||
|
||||
.test-calling-one-arg-mixin(@a) {
|
||||
}
|
||||
|
||||
.test-calling-one-arg-mixin(@a, @b, @rest...) {
|
||||
}
|
||||
|
||||
div {
|
||||
.test-calling-one-arg-mixin(1);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.scope {
|
||||
@var: 99px;
|
||||
.mixin () {
|
||||
width: @var;
|
||||
}
|
||||
}
|
||||
|
||||
.class {
|
||||
.scope > .mixin;
|
||||
}
|
||||
|
||||
.overwrite {
|
||||
@var: 0px;
|
||||
.scope > .mixin;
|
||||
}
|
||||
|
||||
.nested {
|
||||
@var: 5px;
|
||||
.mixin () {
|
||||
width: @var;
|
||||
}
|
||||
.class {
|
||||
@var: 10px;
|
||||
.mixin;
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
|
||||
// basics:
|
||||
|
||||
guard-default-basic-1 {
|
||||
.m(1) {case: 1}
|
||||
.m(@x) when (default()) {default: @x}
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
}
|
||||
|
||||
guard-default-basic-2 {
|
||||
.m(1) {case: 1}
|
||||
.m(2) {case: 2}
|
||||
.m(3) {case: 3}
|
||||
.m(@x) when (default()) {default: @x}
|
||||
|
||||
&-0 {.m(0)}
|
||||
&-2 {.m(2)}
|
||||
}
|
||||
|
||||
guard-default-basic-3 {
|
||||
.m(@x) when (@x = 1) {case: 1}
|
||||
.m(2) {case: 2}
|
||||
.m(@x) when (@x = 3) {case: 3}
|
||||
.m(@x) when (default()) {default: @x}
|
||||
|
||||
&-0 {.m(0)}
|
||||
&-2 {.m(2)}
|
||||
&-3 {.m(3)}
|
||||
}
|
||||
|
||||
guard-default-definition-order {
|
||||
.m(@x) when (default()) {default: @x}
|
||||
.m(@x) when (@x = 1) {case: 1}
|
||||
.m(2) {case: 2}
|
||||
.m(@x) when (@x = 3) {case: 3}
|
||||
|
||||
&-0 {.m(0)}
|
||||
&-2 {.m(2)}
|
||||
&-2 {.m(3)}
|
||||
}
|
||||
|
||||
// out of guard:
|
||||
|
||||
guard-default-out-of-guard {
|
||||
.m(1) {case-1: 1}
|
||||
.m(@x: default()) when (default()) {default: @x}
|
||||
|
||||
&-0 {
|
||||
case-0: default();
|
||||
.m(1);
|
||||
.m(2);
|
||||
case-2: default();
|
||||
}
|
||||
&-1 {.m(default())}
|
||||
&-2 {.m()}
|
||||
}
|
||||
|
||||
// expressions:
|
||||
|
||||
guard-default-expr-not {
|
||||
.m(1) {case: 1}
|
||||
.m(@x) when not(default()) {default: @x}
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
}
|
||||
|
||||
guard-default-expr-eq {
|
||||
.m(@x) when (@x = true) {case: @x}
|
||||
.m(@x) when (@x = false) {case: @x}
|
||||
.m(@x) when (@x = default()) {default: @x}
|
||||
|
||||
&-true {.m(true)}
|
||||
&-false {.m(false)}
|
||||
}
|
||||
|
||||
guard-default-expr-or {
|
||||
.m(1) {case: 1}
|
||||
.m(2) {case: 2}
|
||||
.m(@x) when (default()), (@x = 2) {default: @x}
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
&-3 {.m(3)}
|
||||
}
|
||||
|
||||
guard-default-expr-and {
|
||||
.m(1) {case: 1}
|
||||
.m(2) {case: 2}
|
||||
.m(@x) when (default()) and (@x = 3) {default: @x}
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
&-3 {.m(3)}
|
||||
&-4 {.m(4)}
|
||||
}
|
||||
|
||||
guard-default-expr-always {
|
||||
.m(1) {case: 1}
|
||||
.m(@x) when (default()), not(default()) {default: @x} // always match
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
}
|
||||
|
||||
guard-default-expr-never {
|
||||
.m(1) {case: 1}
|
||||
.m(@x) when (default()) and not(default()) {default: @x} // never match
|
||||
|
||||
&-1 {.m(1)}
|
||||
&-2 {.m(2)}
|
||||
}
|
||||
|
||||
|
||||
// not conflicting multiple default() uses:
|
||||
|
||||
guard-default-multi-1 {
|
||||
.m(0) {case: 0}
|
||||
.m(@x) when (default()) {default-1: @x}
|
||||
.m(2) when (default()) {default-2: @x}
|
||||
|
||||
&-0 {.m(0)}
|
||||
&-1 {.m(1)}
|
||||
}
|
||||
|
||||
guard-default-multi-2 {
|
||||
.m(1, @x) when (default()) {default-1: @x}
|
||||
.m(2, @x) when (default()) {default-2: @x}
|
||||
.m(@x, yes) when (default()) {default-3: @x}
|
||||
|
||||
&-1 {.m(1, no)}
|
||||
&-2 {.m(2, no)}
|
||||
&-3 {.m(3, yes)}
|
||||
}
|
||||
|
||||
guard-default-multi-3 {
|
||||
.m(red) {case-1: darkred}
|
||||
.m(blue) {case-2: darkblue}
|
||||
.m(@x) when (iscolor(@x)) and (default()) {default-color: @x}
|
||||
.m('foo') {case-1: I am 'foo'}
|
||||
.m('bar') {case-2: I am 'bar'}
|
||||
.m(@x) when (isstring(@x)) and (default()) {default-string: I am @x}
|
||||
|
||||
&-blue {.m(blue)}
|
||||
&-green {.m(green)}
|
||||
&-foo {.m('foo')}
|
||||
&-baz {.m('baz')}
|
||||
}
|
||||
|
||||
guard-default-multi-4 {
|
||||
.m(@x) when (default()), not(default()) {always: @x}
|
||||
.m(@x) when (default()) and not(default()) {never: @x}
|
||||
.m(2) {case: 2}
|
||||
|
||||
.m(1);
|
||||
.m(2);
|
||||
}
|
||||
|
||||
guard-default-not-ambiguos-2 {
|
||||
.m(@x) {case: 1}
|
||||
.m(@x) when (default()) {default: @x}
|
||||
.m(@x) when not(default()) {not-default: @x}
|
||||
|
||||
.m(2);
|
||||
}
|
||||
|
||||
guard-default-not-ambiguos-3 {
|
||||
.m(@x) {case: 1}
|
||||
.m(@x) when not(default()) {not-default-1: @x}
|
||||
.m(@x) when not(default()) {not-default-2: @x}
|
||||
|
||||
.m(2);
|
||||
}
|
||||
|
||||
// default & scope
|
||||
|
||||
guard-default-scopes {
|
||||
.s1() {.m(@v) {1: no condition}}
|
||||
.s2() {.m(@v) when (@v) {2: when true}}
|
||||
.s3() {.m(@v) when (default()) {3: when default}}
|
||||
|
||||
&-3 {
|
||||
.s2();
|
||||
.s3();
|
||||
.m(false);
|
||||
}
|
||||
|
||||
&-1 {
|
||||
.s1();
|
||||
.s3();
|
||||
.m(false);
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
|
||||
// Stacking, functions..
|
||||
|
||||
.light (@a) when (lightness(@a) > 50%) {
|
||||
color: white;
|
||||
}
|
||||
.light (@a) when (lightness(@a) < 50%) {
|
||||
color: black;
|
||||
}
|
||||
.light (@a) {
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.light1 { .light(#ddd) }
|
||||
.light2 { .light(#444) }
|
||||
|
||||
// Arguments against each other
|
||||
|
||||
.max (@a, @b) when (@a > @b) {
|
||||
width: @a;
|
||||
}
|
||||
.max (@a, @b) when (@a < @b) {
|
||||
width: @b;
|
||||
}
|
||||
|
||||
.max1 { .max(3, 6) }
|
||||
.max2 { .max(8, 1) }
|
||||
|
||||
// Globals inside guards
|
||||
|
||||
@g: auto;
|
||||
|
||||
.glob (@a) when (@a = @g) {
|
||||
margin: @a @g;
|
||||
}
|
||||
.glob1 { .glob(auto) }
|
||||
|
||||
// Other operators
|
||||
|
||||
.ops (@a) when (@a >= 0) {
|
||||
height: gt-or-eq;
|
||||
}
|
||||
.ops (@a) when (@a =< 0) {
|
||||
height: lt-or-eq;
|
||||
}
|
||||
.ops (@a) when (@a <= 0) {
|
||||
height: lt-or-eq-alias;
|
||||
}
|
||||
.ops (@a) when not(@a = 0) {
|
||||
height: not-eq;
|
||||
}
|
||||
.ops1 { .ops(0) }
|
||||
.ops2 { .ops(1) }
|
||||
.ops3 { .ops(-1) }
|
||||
|
||||
// Scope and default values
|
||||
|
||||
@a: auto;
|
||||
|
||||
.default (@a: inherit) when (@a = inherit) {
|
||||
content: default;
|
||||
}
|
||||
.default1 { .default }
|
||||
|
||||
// true & false keywords
|
||||
.test (@a) when (@a) {
|
||||
content: "true.";
|
||||
}
|
||||
.test (@a) when not (@a) {
|
||||
content: "false.";
|
||||
}
|
||||
|
||||
.test1 { .test(true) }
|
||||
.test2 { .test(false) }
|
||||
.test3 { .test(1) }
|
||||
.test4 { .test(boo) }
|
||||
.test5 { .test("true") }
|
||||
|
||||
// Boolean expressions
|
||||
|
||||
.bool () when (true) and (false) { content: true and false } // FALSE
|
||||
.bool () when (true) and (true) { content: true and true } // TRUE
|
||||
.bool () when (true) { content: true } // TRUE
|
||||
.bool () when (false) and (false) { content: true } // FALSE
|
||||
.bool () when (false), (true) { content: false, true } // TRUE
|
||||
.bool () when (false) and (true) and (true), (true) { content: false and true and true, true } // TRUE
|
||||
.bool () when (true) and (true) and (false), (false) { content: true and true and false, false } // FALSE
|
||||
.bool () when (false), (true) and (true) { content: false, true and true } // TRUE
|
||||
.bool () when (false), (false), (true) { content: false, false, true } // TRUE
|
||||
.bool () when (false), (false) and (true), (false) { content: false, false and true, false } // FALSE
|
||||
.bool () when (false), (true) and (true) and (true), (false) { content: false, true and true and true, false } // TRUE
|
||||
.bool () when not (false) { content: not false }
|
||||
.bool () when not (true) and not (false) { content: not true and not false }
|
||||
.bool () when not (true) and not (true) { content: not true and not true }
|
||||
.bool () when not (false) and (false), not (false) { content: not false and false, not false }
|
||||
|
||||
.bool1 { .bool }
|
||||
|
||||
.equality-unit-test(@num) when (@num = 1%) {
|
||||
test: fail;
|
||||
}
|
||||
.equality-unit-test(@num) when (@num = 2) {
|
||||
test: pass;
|
||||
}
|
||||
.equality-units {
|
||||
.equality-unit-test(1px);
|
||||
.equality-unit-test(2px);
|
||||
}
|
||||
|
||||
.colorguard(@col) when (@col = red) { content: is @col; }
|
||||
.colorguard(@col) when not (blue = @col) { content: is not blue its @col; }
|
||||
.colorguard(@col) {}
|
||||
.colorguardtest {
|
||||
.colorguard(red);
|
||||
.colorguard(blue);
|
||||
.colorguard(purple);
|
||||
}
|
||||
|
||||
.stringguard(@str) when (@str = "theme1") { content: is theme1; }
|
||||
.stringguard(@str) when not ("theme2" = @str) { content: is not theme2; }
|
||||
.stringguard(@str) when (~"theme1" = @str) { content: is theme1 no quotes; }
|
||||
.stringguard(@str) {}
|
||||
.stringguardtest {
|
||||
.stringguard("theme1");
|
||||
.stringguard("theme2");
|
||||
.stringguard(theme1);
|
||||
}
|
||||
|
||||
.mixin(...) {
|
||||
catch:all;
|
||||
}
|
||||
.mixin(@var) when (@var=4) {
|
||||
declare: 4;
|
||||
}
|
||||
.mixin(@var) when (@var=4px) {
|
||||
declare: 4px;
|
||||
}
|
||||
#tryNumberPx {
|
||||
.mixin(4px);
|
||||
}
|
||||
|
||||
.lock-mixin(@a) {
|
||||
.inner-locked-mixin(@x: @a) when (@a = 1) {
|
||||
a: @a;
|
||||
x: @x;
|
||||
}
|
||||
}
|
||||
.call-lock-mixin {
|
||||
.lock-mixin(1);
|
||||
.call-inner-lock-mixin {
|
||||
.inner-locked-mixin();
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.submixin(@a) {
|
||||
border-width: @a;
|
||||
}
|
||||
.mixin (9) {
|
||||
border: 9 !important;
|
||||
}
|
||||
.mixin (@a: 0) {
|
||||
border: @a;
|
||||
boxer: @a;
|
||||
.inner {
|
||||
test: @a;
|
||||
}
|
||||
// comment
|
||||
.submixin(@a);
|
||||
}
|
||||
|
||||
.class {
|
||||
.mixin(1);
|
||||
.mixin(2) !important;
|
||||
.mixin(3);
|
||||
.mixin(4) !important;
|
||||
.mixin(5);
|
||||
.mixin !important;
|
||||
.mixin(9);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
|
||||
@a1: foo;
|
||||
@a2: ~".foo";
|
||||
@a4: ~"#foo";
|
||||
|
||||
.@{a1} {
|
||||
a: 1;
|
||||
}
|
||||
|
||||
@{a2} {
|
||||
a: 2;
|
||||
}
|
||||
|
||||
#@{a1} {
|
||||
a: 3;
|
||||
}
|
||||
|
||||
@{a4} {
|
||||
a: 4;
|
||||
}
|
||||
|
||||
mi-test-a {
|
||||
.foo;
|
||||
#foo;
|
||||
}
|
||||
|
||||
.b .bb {
|
||||
&.@{a1}-xxx .yyy-@{a1}@{a4} {
|
||||
& @{a2}.bbb {
|
||||
b: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mi-test-b {
|
||||
.b.bb.foo-xxx.yyy-foo#foo.foo.bbb;
|
||||
}
|
||||
|
||||
@c1: @a1;
|
||||
@c2: bar;
|
||||
@c3: baz;
|
||||
|
||||
#@{c1}-foo {
|
||||
> .@{c2} {
|
||||
.@{c3} {
|
||||
c: c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mi-test-c {
|
||||
&-1 {#foo-foo;}
|
||||
&-2 {#foo-foo > .bar;}
|
||||
&-3 {#foo-foo > .bar.baz;}
|
||||
}
|
||||
|
||||
.Person(@name, @gender_) {
|
||||
.@{name} {
|
||||
@gender: @gender_;
|
||||
.sayGender() {
|
||||
gender: @gender;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mi-test-d {
|
||||
.Person(person, "Male");
|
||||
.person.sayGender();
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.mixin (@a: 1px, @b: 50%) {
|
||||
width: (@a * 5);
|
||||
height: (@b - 1%);
|
||||
args: @arguments;
|
||||
}
|
||||
.mixin (@a: 1px, @b: 50%) when (@b > 75%){
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.named-arg {
|
||||
color: blue;
|
||||
.mixin(@b: 100%);
|
||||
}
|
||||
|
||||
.class {
|
||||
@var: 20%;
|
||||
.mixin(@b: @var);
|
||||
}
|
||||
|
||||
.all-args-wrong-args {
|
||||
.mixin(@b: 10%, @a: 2px);
|
||||
}
|
||||
|
||||
.mixin2 (@a: 1px, @b: 50%, @c: 50) {
|
||||
width: (@a * 5);
|
||||
height: (@b - 1%);
|
||||
color: (#000000 + @c);
|
||||
}
|
||||
|
||||
.named-args2 {
|
||||
.mixin2(3px, @c: 100);
|
||||
}
|
||||
|
||||
.named-args3 {
|
||||
.mixin2(@b: 30%, @c: #123456);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.mix-inner (@var) {
|
||||
border-width: @var;
|
||||
}
|
||||
|
||||
.mix (@a: 10) {
|
||||
.inner {
|
||||
height: (@a * 10);
|
||||
|
||||
.innest {
|
||||
width: @a;
|
||||
.mix-inner((@a * 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.class {
|
||||
.mix(30);
|
||||
}
|
||||
|
||||
.class2 {
|
||||
.mix(60);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
.mixin (...) {
|
||||
variadic: true;
|
||||
}
|
||||
.mixin (@a...) {
|
||||
named-variadic: true;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
|
||||
test {
|
||||
@prefix: ufo-;
|
||||
@a: border;
|
||||
@bb: top;
|
||||
@c_c: left;
|
||||
@d-d4: radius;
|
||||
@-: -;
|
||||
|
||||
@{a}: 0;
|
||||
@{prefix}width: 50%;
|
||||
*-z-@{a} :1px dashed blue;
|
||||
-www-@{a}-@{bb}: 2px;
|
||||
@{d-d4}-is-not-a-@{a}:true;
|
||||
@{a}-@{bb}-@{c_c}-@{d-d4} : 2em;
|
||||
@{a}@{-}@{bb}@{-}red@{-}@{d-d4}-: 3pt;
|
||||
|
||||
.mixin(mixer);
|
||||
.merge(ish, base);
|
||||
}
|
||||
|
||||
@global: global;
|
||||
|
||||
.mixin(@arg) {
|
||||
@local: local;
|
||||
@{global}-@{local}-@{arg}-property: strong;
|
||||
}
|
||||
|
||||
.merge(@p, @v) {
|
||||
&-merge {
|
||||
@prefix: pre;
|
||||
@suffix: ish;
|
||||
@{prefix}-property-ish+ :high;
|
||||
pre-property-@{suffix} +: middle;
|
||||
@{prefix}-property-@{suffix}+: low;
|
||||
@{prefix}-property-@{p} + : @v;
|
||||
|
||||
@subterfuge: ~'+';
|
||||
pre-property-ish@{subterfuge}: nice try dude;
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
#first > .one {
|
||||
> #second .two > #deux {
|
||||
width: 50%;
|
||||
#third {
|
||||
&:focus {
|
||||
color: black;
|
||||
#fifth {
|
||||
> #sixth {
|
||||
.seventh #eighth {
|
||||
+ #ninth {
|
||||
color: purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
#fourth, #five, #six {
|
||||
color: #110000;
|
||||
.seven, .eight > #nine {
|
||||
border: 1px solid black;
|
||||
}
|
||||
#ten {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
font-size: 2em;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
@x: red;
|
||||
@x: blue;
|
||||
@z: transparent;
|
||||
@mix: none;
|
||||
|
||||
.mixin {
|
||||
@mix: #989;
|
||||
}
|
||||
@mix: blue;
|
||||
.tiny-scope {
|
||||
color: @mix; // #989
|
||||
.mixin;
|
||||
}
|
||||
|
||||
.scope1 {
|
||||
@y: orange;
|
||||
@z: black;
|
||||
color: @x; // blue
|
||||
border-color: @z; // black
|
||||
.hidden {
|
||||
@x: #131313;
|
||||
}
|
||||
.scope2 {
|
||||
@y: red;
|
||||
color: @x; // blue
|
||||
.scope3 {
|
||||
@local: white;
|
||||
color: @y; // red
|
||||
border-color: @z; // black
|
||||
background-color: @local; // white
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#namespace {
|
||||
.scoped_mixin() {
|
||||
@local-will-be-made-global: green;
|
||||
.scope {
|
||||
scoped-val: @local-will-be-made-global;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#namespace > .scoped_mixin();
|
||||
|
||||
.setHeight(@h) { @height: 1024px; }
|
||||
.useHeightInMixinCall(@h) { .useHeightInMixinCall { mixin-height: @h; } }
|
||||
@mainHeight: 50%;
|
||||
.setHeight(@mainHeight);
|
||||
.heightIsSet { height: @height; }
|
||||
.useHeightInMixinCall(@height);
|
||||
|
||||
.importRuleset() {
|
||||
.imported {
|
||||
exists: true;
|
||||
}
|
||||
}
|
||||
.importRuleset();
|
||||
.testImported {
|
||||
.imported;
|
||||
}
|
||||
|
||||
@parameterDefault: 'top level';
|
||||
@anotherVariable: 'top level';
|
||||
//mixin uses top-level variables
|
||||
.mixinNoParam(@parameter: @parameterDefault) when (@parameter = 'top level') {
|
||||
default: @parameter;
|
||||
scope: @anotherVariable;
|
||||
sub-scope-only: @subScopeOnly;
|
||||
}
|
||||
|
||||
#allAreUsedHere {
|
||||
//redefine top-level variables in different scope
|
||||
@parameterDefault: 'inside';
|
||||
@anotherVariable: 'inside';
|
||||
@subScopeOnly: 'inside';
|
||||
//use the mixin
|
||||
.mixinNoParam();
|
||||
}
|
||||
#parentSelectorScope {
|
||||
@col: white;
|
||||
& {
|
||||
@col: black;
|
||||
}
|
||||
prop: @col;
|
||||
& {
|
||||
@col: black;
|
||||
}
|
||||
}
|
||||
.test-empty-mixin() {
|
||||
}
|
||||
#parentSelectorScopeMixins {
|
||||
& {
|
||||
.test-empty-mixin() {
|
||||
should: never seee 1;
|
||||
}
|
||||
}
|
||||
.test-empty-mixin();
|
||||
& {
|
||||
.test-empty-mixin() {
|
||||
should: never seee 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
#strings {
|
||||
background-image: url("http://son-of-a-banana.com");
|
||||
quotes: "~" "~";
|
||||
content: "#*%:&^,)!.(~*})";
|
||||
empty: "";
|
||||
brackets: "{" "}";
|
||||
escapes: "\"hello\" \\world";
|
||||
escapes2: "\"llo";
|
||||
}
|
||||
#comments {
|
||||
content: "/* hello */ // not-so-secret";
|
||||
}
|
||||
#single-quote {
|
||||
quotes: "'" "'";
|
||||
content: '""#!&""';
|
||||
empty: '';
|
||||
semi-colon: ';';
|
||||
}
|
||||
#escaped {
|
||||
filter: ~"DX.Transform.MS.BS.filter(opacity=50)";
|
||||
}
|
||||
#one-line { image: url(http://tooks.com) }
|
||||
#crazy { image: url(http://), "}", url("http://}") }
|
||||
#interpolation {
|
||||
@var: '/dev';
|
||||
url: "http://lesscss.org@{var}/image.jpg";
|
||||
|
||||
@var2: 256;
|
||||
url2: "http://lesscss.org/image-@{var2}.jpg";
|
||||
|
||||
@var3: #456;
|
||||
url3: "http://lesscss.org@{var3}";
|
||||
|
||||
@var4: hello;
|
||||
url4: "http://lesscss.org/@{var4}";
|
||||
|
||||
@var5: 54.4px;
|
||||
url5: "http://lesscss.org/@{var5}";
|
||||
}
|
||||
|
||||
// multiple calls with string interpolation
|
||||
|
||||
.mix-mul (@a: green) {
|
||||
color: ~"@{a}";
|
||||
}
|
||||
.mix-mul-class {
|
||||
.mix-mul(blue);
|
||||
.mix-mul(red);
|
||||
.mix-mul(black);
|
||||
.mix-mul(orange);
|
||||
}
|
||||
|
||||
@test: Arial, Verdana, San-Serif;
|
||||
.watermark {
|
||||
@family: ~"Univers, @{test}";
|
||||
family: @family;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
@Eight: 8;
|
||||
@charset "UTF-@{Eight}";
|
||||
|
||||
@ns: less;
|
||||
@namespace @ns "http://lesscss.org";
|
||||
|
||||
@name: enlarger;
|
||||
@keyframes @name {
|
||||
from {font-size: 12px;}
|
||||
to {font-size: 15px;}
|
||||
}
|
||||
|
||||
.m(reducer);
|
||||
.m(@name) {
|
||||
@-webkit-keyframes @name {
|
||||
from {font-size: 13px;}
|
||||
to {font-size: 10px;}
|
||||
}
|
||||
}
|
||||
~~~~~~~~~~
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
.whitespace
|
||||
{ color: white; }
|
||||
|
||||
.whitespace
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
.whitespace
|
||||
{ color: white; }
|
||||
|
||||
.whitespace{color:white;}
|
||||
.whitespace { color : white ; }
|
||||
|
||||
.white,
|
||||
.space,
|
||||
.mania
|
||||
{ color: white; }
|
||||
|
||||
.no-semi-column { color: white }
|
||||
.no-semi-column {
|
||||
color: white;
|
||||
white-space: pre
|
||||
}
|
||||
.no-semi-column {border: 2px solid white}
|
||||
.newlines {
|
||||
background: the,
|
||||
great,
|
||||
wall;
|
||||
border: 2px
|
||||
solid
|
||||
black;
|
||||
}
|
||||
.empty {
|
||||
|
||||
}
|
||||
.sel
|
||||
.newline_ws .tab_ws {
|
||||
color:
|
||||
white;
|
||||
background-position: 45
|
||||
-23;
|
||||
}
|
||||
~~~~~~~~~~
|
||||
Loading…
Reference in a new issue