Libsass: Peta sumber 'tidak membantu' saat pemilih dibuat melalui mixin

Silakan bandingkan ini dengan Ruby Sass. Jika berbeda secara signifikan, kita dapat melihat. Kami tidak bermaksud untuk membedakan dari perilaku Ruby Sass.

Ruby sass melakukan hal yang sama seperti yang kita lakukan. Saya setuju bahwa ini bisa berguna karena Anda harus dapat menjangkau badan mixin dengan mengikuti properti (sejauh ini AFAIK hanya mungkin di chrome).

FWIW inilah visualisasi contoh ini

@paulirish apakah Anda punya rekomendasi bagaimana kita harus menangani ini? Kesimpulan terakhir saya adalah bahwa kita bisa membungkus selektor yang dihasilkan ( .foobar-ext ) dengan pemetaan lain untuk panggilan @include sebenarnya (kita sebenarnya harus menerapkannya ke setiap pemilih di dalam mixin). Saya rasa itu harus diartikan seperti yang diinginkan oleh OP di setiap browser. Di chrome kita masih bisa dengan mudah mendapatkan pemilih / blok yang benar dengan mengikuti properti di inspektur. Tapi saya pikir ini tidak akan berfungsi di browser lain sejauh ini (mungkin telah berubah sementara itu). Jadi di sana kita akan kehilangan pemetaan ke tempat selektor (dan propertinya) ditentukan. Itu sebabnya saya belum mengembangkan masalah ini ...

FYI: Di sini "visualisasi" yang setara di inspektur sumber source libsass - live .

Halo,

Apakah ada kemajuan dalam masalah ini? Kami menggunakan mixin BEM sebagai pembantu untuk menghasilkan semua gaya bem kami. seperti saat ini, peta sumber tidak dapat digunakan dengan pendekatan ini.

Saya mengerti ini adalah masalah yang sulit dan saya menghargai setiap dan semua pekerjaan yang Anda lakukan untuk masalah ini.

cc @aslushnikov atas bimbingannya dalam menangani masalah peta sumber ini.

Mengikuti masalah ini, karena saya mengalami hal yang sama. Saya untuk sementara mengatasi ini dengan menyuntikkan beberapa CSS non-standar selama pengembangan, tetapi itu membuat saya merasa tidak bersih.

@paulirish - Jadi, penemuan menarik hari ini saat saya menguji ini:

// source-map-test.scss
<strong i="7">@mixin</strong> source-map-test {
 display: block;
}

// properties
my-element {
 <strong i="8">@include</strong> source-map-test;
}

Kode di atas akan menampilkan peta sumber, dengan my-element dikreditkan ke source-map-test.scss

NAMUN

// source-map-test.scss
<strong i="15">@mixin</strong> source-map-test {
 display: block;
}

// properties
my-element {
 /*!*/
 <strong i="16">@include</strong> source-map-test;
}

Menambahkan komentar penting yang kosong sebelum panggilan mixin, akan menghasilkan peta sumber yang memberi kredit my-element menjadi my-element-source-file.scss (menambahkan komentar normal // atau /* */ tidak tidak berfungsi. Tapi /*!*/ berhasil.)

Diuji dengan node-sass melalui grunt-sass-2.0.0

Saya tidak tahu mengapa ini berhasil.

@kgcreative Melihat http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments

Ketika huruf pertama dari komentar multiline adalah!, Komentar akan selalu ditampilkan menjadi keluaran css bahkan dalam mode keluaran terkompresi.

Komentar /*!*/ disimpan pada keluaran. Sebagai contoh:

Kasus umum

Masukkan SCSS

%foo {
  color: red
}
.bar {
  <strong i="14">@extend</strong> %foo;
}
.baz {
  <strong i="15">@extend</strong> %foo;
}

Output CSS

.bar,
.baz {
  color: red;
}

Gunakan /*!*/ komentar

Masukkan SCSS

%foo {
  color: red
}
.bar {
  /*!*/
  <strong i="24">@extend</strong> %foo;
}
.baz {
  /*!*/
  <strong i="25">@extend</strong> %foo;
}

Output CSS

.bar,
.baz {
  color: red;
}
.bar {
    /*!*/
}
.baz {
    /*!*/
}

Selektor tambahan disimpan dalam keluaran. Pemeriksa Chrome menampilkan aturan ini. Mereka kosong tetapi disertakan dalam Peta Sumber sehingga navigasi dimungkinkan.

Masih mengalami masalah ini saat membuat pemilih BEM dengan mixin. Solusi @kgcreative tidak berfungsi menggunakan [email protected] dan [email protected] .

Adakah pembaruan / ide / rekomendasi?

Menimpali untuk mengatakan bahwa memperbaiki ini dan / atau memiliki solusi untuk menelusuri kembali penggunaan mixin daripada mixin itu sendiri akan sangat berguna untuk beberapa pekerjaan analisis css yang dilakukan tim saya. Terima kasih!

Diskusi lebih lanjut di https://twitter.com/ksylor/status/971774023964250112

Masalah yang sama disini.
Saya beralih dari sass yang dihasilkan Ruby ke sass yang dihasilkan oleh node / libsass.

Peta sumber Ruby menunjukkan nomor baris relatif terhadap aturan css, sedangkan yang libsass adalah baris dari mixin yang menghasilkan selektor, yang sama sekali tidak berguna.

Jika saya ingin tahu di mana sebuah mixin, yang harus saya lakukan hanyalah mencari teks sederhana, tetapi menemukan aturan css tertentu dalam scss jauh lebih rumit.

Selain itu, pemeriksa Google Chrome menampilkan baris aturan css yang benar (dan bukan baris mixin) sementara Firefox menampilkan baris mixin dengan peta sumber yang dihasilkan libsass yang sama. Mengapa demikian?

Jadi ... tidak ada kabar tentang itu?
Firefox masih menampilkan nomor baris mixin, bukan nomor baris aturan.