pixsy/node_modules/less/test/less/mixins-args.less

263 lines
3.8 KiB
Plaintext

.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);
}
mixins-args-expand-op- {
@x: 1, 2, 3;
@y: 4 5 6;
&1 {.m3(@x...)}
&2 {.m3(@y...)}
&3 {.wr(a, b, c)}
&4 {.wr(a; b; c, d)}
&5 {.wr(@x...)}
&6 {.m4(0; @x...)}
&7 {.m4(@x..., @a: 0)}
&8 {.m4(@b: 1.5; @x...)}
&9 {.aa(@y, @x..., and again, @y...)}
.m3(@a, @b, @c) {
m3: @a, @b, @c;
}
.m4(@a, @b, @c, @d) {
m4: @a, @b, @c, @d;
}
.wr(@a...) {
&a {.m3(@a...)}
&b {.m4(0, @a...)}
&c {.m4(@a..., 4)}
}
.aa(@a...) {
aa: @a;
a4: extract(@a, 5);
a8: extract(@a, 8);
}
}
#test-mixin-matching-when-default-2645 {
.mixin(@height) {
height: @height;
}
.mixin(@width, @height: 10px) {
width: @width;
.mixin(@height: @height);
}
.mixin(@height: 20px);
}