CODEWITHSUNDEEP
lessconverterspixelunits-of-measurement
Max.A
Max.A

Reputation: 89

Pixels to rems units conversion mixin just the value for multiply usage

Tring to get the value in rems but got 'Missing '[...]' lookup in variable call'

@root-font-size: 16px;

.px-to-rem(@px) {
    @rem: (@px / @root-font-size) * 1rem;
    @rem;
}

.my-element {
    font-size: .px-to-rem(20px); // Returns the numeric value in rem
}

Upvotes: 0

Views: 25

Answers (2)

Max.A
Max.A

Reputation: 89

I found more simple and universal solution:

// Px to rem variable
@rem: 0.0625rem;

.cart-action-panel {
    width: 200 * @rem;
}

// Rem font size mixin
.rem(@font-size: 14) {
    @basic-font-size: 16px;
    //font-size: (@existent-font-size / 10) + 0rem;  // If html font size 10px
    font-size: (@basic-font-size * 0.625 / 10) * @font-size + 0rem; // If html font size default: 16px
}

Upvotes: 0

papo
papo

Reputation: 1949

For others finding this question while searching for an error:

Missing '[...]' lookup in variable call

This error is shown when you try to use the less variable improperly.
Probably as a whole property: propertyname-propertyvalue set. i.e. as a whole line inside a ruleset. e.g.:

// --- BAD example
@myvar: color: blue
.myslector {
   @myvar;
}
// --- BAD example

Less variable can't be used as a literal replacement of its value.

The BAD example above can be fixed using Detached Rulesets.

@myvar: { color: blue }
.myslector {
   @myvar();
}

Closest to the OP's situation, there is Variable Interpolation.
Although, from examples of the above link, it might look like @{myvar} construct can be used anywhere, it might not be used as a complete propertyname-propertyvalue set. That is, as a line separated by a semicolon in a CSS ruleset. I do not see a reason why.

For the OP's specific question.

Read the DOCs.
The example is just not how less works.

Solution 1: Mixins as Functions
The return of the function will be an Object and you index the variable you need from it:

@root-font-size: 16px;

.px-to-rem(@px) {
    @rem: (@px / @root-font-size) * 1rem;
}

.my-element {
    font-size: .px-to-rem(20px)[@rem]; // Returns the numeric value in rem
}

Solution 2: Parametric Mixins which will:

"mix-in" properties from existing styles

@root-font-size: 16px;

.px-to-rem(@px) {
    font-size: (@px / @root-font-size) * 1rem;
}

.my-element {
    .px-to-rem(20px);
}

Upvotes: 0

Related Questions