Less.js: Kueri media: tanda kurung diperlukan bahkan tanpa --strict-math=on

Dibuat pada 9 Agu 2013 · 7Komentar · Sumber: less/less.js

Contoh ini menghasilkan output yang berbeda di bawah less 1.3.3 dan 1.4.2:

.foo (@dpr) {
    <strong i="6">@dpi</strong>: <strong i="7">@dpr</strong> * 96dpi;
    <strong i="8">@query</strong>: ~'(min-resolution: @{dpi})';
    <strong i="9">@media</strong> <strong i="10">@query</strong> {
    }
}
.foo(2);

Keluaran dengan lebih sedikit 1.3.3:

<strong i="14">@media</strong> (min-resolution: 192dpi) {

}

Keluaran dengan lebih sedikit 1.4.1:

<strong i="18">@media</strong> (min-resolution: 2 * 96dpi) {

}

Menambahkan tanda kurung di sekitar @dpr * 96dpi membuat output kurang 1.4.1 sama dengan 1.3.3, tetapi ini adalah kesalahan tak terduga dengan peningkatan ke 1.4.x.

bug high priority

Sumber

papandreou

👍1

Komentar yang paling membantu

:+1: Juga melihat ini di less 2.5.1. Solusi yang disarankan untuk menempatkan tanda kurung di sekitar variabel dalam kueri media berfungsi.

Kasus masalah sepele:

<strong i="7">@foo</strong>: 10px;
<strong i="8">@bar</strong>: 20px;
<strong i="9">@baz</strong>: <strong i="10">@foo</strong> + @bar;

.test {
  <strong i="11">@media</strong> (min-width: @baz) {
    color: red;
  }
}

CSS yang dikompilasi dari kasus masalah sepele (tidak valid):

<strong i="15">@media</strong> (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

Kasus masalah sepele dengan solusi:

<strong i="19">@foo</strong>: 10px;
<strong i="20">@bar</strong>: 20px;
<strong i="21">@baz</strong>: <strong i="22">@foo</strong> + @bar;

.test {
  <strong i="23">@media</strong> (min-width: (@baz)) {
    color: red;
  }
}

CSS yang dikompilasi dari kasus masalah sepele dengan solusi:

<strong i="27">@media</strong> (min-width: 30px) {
  .test {
    color: red;
  }
}

clayzermk1 pada 18 Sep 2015

👍2

Semua 7 komentar

ah, sedikit kasus tepi.. kami memaksakan matematika ketat dalam kueri media sehingga orang dapat menggunakan pecahan, terima kasih telah mengangkat masalah ini.

lukeapage pada 15 Agu 2013

:+1: Juga melihat ini di less 2.5.1. Solusi yang disarankan untuk menempatkan tanda kurung di sekitar variabel dalam kueri media berfungsi.

Kasus masalah sepele:

<strong i="7">@foo</strong>: 10px;
<strong i="8">@bar</strong>: 20px;
<strong i="9">@baz</strong>: <strong i="10">@foo</strong> + @bar;

.test {
  <strong i="11">@media</strong> (min-width: @baz) {
    color: red;
  }
}

CSS yang dikompilasi dari kasus masalah sepele (tidak valid):

<strong i="15">@media</strong> (min-width: 10px + 20px) {
  .test {
    color: red;
  }
}

Kasus masalah sepele dengan solusi:

<strong i="19">@foo</strong>: 10px;
<strong i="20">@bar</strong>: 20px;
<strong i="21">@baz</strong>: <strong i="22">@foo</strong> + @bar;

.test {
  <strong i="23">@media</strong> (min-width: (@baz)) {
    color: red;
  }
}

CSS yang dikompilasi dari kasus masalah sepele dengan solusi:

<strong i="27">@media</strong> (min-width: 30px) {
  .test {
    color: red;
  }
}

clayzermk1 pada 18 Sep 2015

👍2

Kami juga terpengaruh oleh ini di Moodle karena masalah ini memengaruhi stok bootstrap versi 2.3.

Dalam hal ini variabel ditetapkan (https://github.com/twbs/bootstrap/blob/v2.3.2/less/variables.less#L181):

<strong i="7">@navbarCollapseWidth</strong>:             979px;
<strong i="8">@navbarCollapseDesktopWidth</strong>:      <strong i="9">@navbarCollapseWidth</strong> + 1;

Media-query adalah (https://github.com/twbs/bootstrap/blob/v2.3.2/less/responsive-navbar.less#L181):

<strong i="13">@media</strong> (min-width: @navbarCollapseDesktopWidth) {
}

Ini mengarah ke output:

<strong i="17">@media</strong> (min-width: 979px + 1) {
}

https://tracker.moodle.org/browse/MDL-53152

andrewnicols pada 8 Apr 2016

Saya mencoba melakukan sesuatu seperti

@media (min-width: @navbarCollapseWidth + 1) { }

untuk menghindari membuat variabel ekstra lebih sedikit, tetapi ini tidak berhasil, ada ide mengapa?

es6Test pada 21 Mei 2016

untuk menghindari membuat variabel ekstra lebih sedikit, tetapi ini tidak berhasil, ada ide mengapa?

Saat ini parens diperlukan untuk ekspresi aritmatika dalam pernyataan @media , misalnya:

<strong i="9">@media</strong> (min-width: (<strong i="10">@navbarCollapseWidth</strong> + 1)) { }

seven-phases-max pada 21 Mei 2016

Saya mendapatkan kesalahan untuk

<strong i="6">@media</strong> (max-width: (<strong i="7">@sm</strong> -1)) {
  .hidden-sm-down{  // hide anything up to small size
    display: none;
  }
}

Kesalahan memuat "app/styles/index.less!$less" dari "app/app" di http://localhost:63342/foo/app/app.js Diharapkan ')'"

es6Test pada 21 Mei 2016