Less.js: Calculations in media queries

Created on 28 Feb 2014  路  2Comments  路  Source: less/less.js

LESS CODE:
@x: 0.6
@media screen and (max-width: 1735px*@x)

Does not compile into expected:
@media screen and (max-width: 1041px)

However into:
@media screen and (max-width: 1735px*0.6)

It's not a big deal, but it's inconstinent with declarations like:
width: 1735px*@x

This one works as expected:
width: 1041px

EDIT: With parenthess is calculation OK:
@x: 0.6
@media screen and (max-width: (1735px*@x))

bug medium priority

Most helpful comment

Please use backticks to format your code.

Yes, known limitation, see #1480 (probably needs to be documented). All arithmetic within media query expressions requires parens (regardless of the --strict-math option value). e.g.:

@var: (1 + 1); // parens have to be even here
@media (max-width: @var) {}

Related to #1880.

All 2 comments

Please use backticks to format your code.

Yes, known limitation, see #1480 (probably needs to be documented). All arithmetic within media query expressions requires parens (regardless of the --strict-math option value). e.g.:

@var: (1 + 1); // parens have to be even here
@media (max-width: @var) {}

Related to #1880.

Closing as duplicate of #1480.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Oskariok picture Oskariok  路  6Comments

joe223 picture joe223  路  4Comments

bassjobsen picture bassjobsen  路  6Comments

awebdev picture awebdev  路  4Comments

xblakestone picture xblakestone  路  3Comments