css - Passing a variable by reference in a LESS mixin - Stack Overflow

admin管理员组

文章数量:1303454

Is there a way to pass a variable by reference in a LESS mixin?

.test-mixin(@varname)
{
    test-prop: @@varname; // Works, test-prop is 5.
    @@varname: 7; // Error
}

:root
{
    @test-var: 5;
    .test-mixin(test-var);
    --test: @test-var; // I want it to be 7 here.
}

Why do I need this? I have the following mixin:

.assert-image-is-square(@src)
{
    // assert_eq is a plugin, that throws an exception and breaks compilation.
    assert_eq(image-width(@src), image-height(@src));
}

…and want it to also change a given @size:

@box_size: dummy;
.assert-image-is-square('images/box.png', @box_size);

Is there a way to pass a variable by reference in a LESS mixin?

.test-mixin(@varname)
{
    test-prop: @@varname; // Works, test-prop is 5.
    @@varname: 7; // Error
}

:root
{
    @test-var: 5;
    .test-mixin(test-var);
    --test: @test-var; // I want it to be 7 here.
}

Why do I need this? I have the following mixin:

.assert-image-is-square(@src)
{
    // assert_eq is a plugin, that throws an exception and breaks compilation.
    assert_eq(image-width(@src), image-height(@src));
}

…and want it to also change a given @size:

@box_size: dummy;
.assert-image-is-square('images/box.png', @box_size);

• css
• less
• less-mixins

Share Improve this question Follow asked Feb 4 at 14:40 ShtoleShtole 34822 silver badges1515 bronze badges 1

• I hope no one else will edit your code except you. – imhvost Commented Feb 4 at 21:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

So far, the best shot is to declare variables within the mixin and use them outside:

.test-mixin(@varname)
{
    test-prop: @varname; // Do something.

    @res-1: 7;
    @res-2: 8;
}

:root
{
    @test-var: 5;
    @result: .test-mixin(@test-var);
    --test-1: @result[@res-1]; // 7
    --test-2: @result[@res-2]; // 8
}

本文标签： cssPassing a variable by reference in a LESS mixinStack Overflow