Libsass: Jenis penyeleksi harus selalu mencetak sebelum kelas-psuedo

Dibuat pada 30 Jun 2018 · 3Komentar · Sumber: sass/libsass

Saat memperluas placeholder dari pemilih [type] , jika placeholder menggunakan pseudo-class, penyeleksi dicetak dengan urutan yang salah.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

Hasil nyata

libsass 3.5.4

[type="button"] {
  color: red;
}

:focus[type="button"] {
  color: blue;
}

Hasil yang diharapkan

ruby sass 3.5.6

[type="button"] {
  color: red;
}

[type="button"]:focus {
  color: blue;
}

informasi versi:

$ node-sass --version
node-sass   4.9.0   (Wrapper)   [JavaScript]
libsass     3.5.4   (Sass Compiler) [C/C++]

Saya juga menjalankan beberapa pernyataan debug dengan selector-unify dan memperhatikan jika saya menggunakan pemilih elemen itu disatukan seperti yang diharapkan terlepas dari urutannya, tetapi pemilih jenis tidak.

@debug(selector-unify('button', ':focus'));
// button:focus

@debug(selector-unify(':focus', 'button'));
// button:focus

@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus

@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]

Beri tahu saya jika ada informasi lain yang dapat saya berikan!

Bug - @extends Bug - Confirmed Dev - Test Written

Sumber

ashleykolodziej

👍6

Komentar yang paling membantu

Ini adalah bug yang cukup
https://www.sassmeister.com/

Ok saya punya brainfart kemarin, contoh saya di bawah ini sebenarnya bukan bug (atau setidaknya urutannya tidak masalah dalam hal itu).
Tapi bug aslinya masih ada.

~~Saya juga melakukan beberapa tes, dan ada lebih banyak cara yang diperluas dengan kelas di dalamnya, juga dicetak dalam urutan yang salah:~~
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

Keluaran:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~Seperti yang Anda lihat ... hoverclass dicetak sebagai kelas pertama.~~
~~Sebenarnya, saya telah menemukan bahwa contoh saya juga merupakan bug di pustaka sass biasa.~~

bskibinski pada 4 Okt 2018

👍3

Semua 3 komentar

Ini adalah bug yang cukup
https://www.sassmeister.com/

Ok saya punya brainfart kemarin, contoh saya di bawah ini sebenarnya bukan bug (atau setidaknya urutannya tidak masalah dalam hal itu).
Tapi bug aslinya masih ada.

~~Saya juga melakukan beberapa tes, dan ada lebih banyak cara yang diperluas dengan kelas di dalamnya, juga dicetak dalam urutan yang salah:~~
Libsass:


%testextend {
  background: red;
  &.hoverclass {
    background: blue;
  }
}

%testextend {
  background: red;
  &:hover {
    background: blue;
  }
}

.wrapper {
  &.inner {
    <strong i="15">@extend</strong> %testextend;
  }
}

Keluaran:


.wrapper.inner {
  background: red;
}

.hoverclass.wrapper.inner {
  background: blue;
}

.wrapper.inner {
  background: red;
}

.wrapper.inner:hover {
  background: blue;
}

~~Seperti yang Anda lihat ... hoverclass dicetak sebagai kelas pertama.~~
~~Sebenarnya, saya telah menemukan bahwa contoh saya juga merupakan bug di pustaka sass biasa.~~

bskibinski pada 4 Okt 2018

👍3

@bskibinski Saya tidak

ashleykolodziej pada 5 Okt 2018

@ashleykolodziej Haha selamat hari kue! Senang saya bisa membuatnya lebih baik;)

Juga, penemuan bug kedua saya sebenarnya bukanlah bug (hari yang panjang) tetapi milik Anda tetap!
Semoga ini segera diperbaiki! :)

bskibinski pada 5 Okt 2018

Apakah halaman ini membantu?

0 / 5 - 0 peringkat