Less.js: Tambahkan dukungan untuk variabel "default" (mirip dengan !default di SASS)

Lihat Dokumentasi .

Pembaruan: Menghapus komentar saya sebelumnya dari posting ini untuk tidak membingungkan pengunjung di masa mendatang (di sini saya mencoba menjawab pertanyaan "bagaimana mendefinisikan variabel jika belum ditentukan" dan melewatkan intinya itu adalah "Masalah XY" dan jawaban yang benar untuk a Sass-like !default adalah: di Less Anda tidak memerlukan hal seperti itu karena fungsionalitas yang diperlukan ("(re)definisi setelah digunakan") sudah disediakan dengan cara kerja Variabel yang lebih sedikit).

Jika Anda mendefinisikan variabel yang sama dua kali, deklarasi terakhir menang dan valid di seluruh cakupan. Jadi, opsi lain adalah mendeklarasikan variabel secara normal dan meminta pengguna untuk memasukkan variabelnya setelah perpustakaan Anda.

perpustakaan.less

<strong i="7">@width</strong>: 0;
.mixin {
  width: @width;
}

pengguna.kurang:

<strong i="11">@import</strong> "library.less"; //first declaration of <strong i="12">@width</strong>
<strong i="13">@width</strong>: 1; //this will override <strong i="14">@width</strong> defined previously
.class {
  .mixin();
}

mengkompilasi menjadi:

.mixin {
  width: 1;
}
.class {
  width: 1;
}

Terima kasih atas masukannya untuk PR kami. Solusi ini akan dapat diterapkan jika kita memiliki satu atau beberapa hal kecil untuk dikonsumsi. Jadi izinkan saya menguraikan mengapa solusi ini tidak dapat diterapkan dalam kasus kami.

Kami membuat kerangka besar komponen yang diimplementasikan sebagai hierarki kelas. Kami mendeklarasikan variabel untuk setiap komponen dalam filenya sendiri... di tema dasar kami. Kami kemudian "mengambil" tema dari sini yang ingin mengubah variabel ini. Pengguna selanjutnya dapat melakukannya untuk menyesuaikan tema dengan kebutuhan mereka.

Selanjutnya, variabel sering "berasal" dari variabel lain. Ini yang paling jelas adalah warna dasar. Kami telah menghabiskan banyak waktu mendiskusikan alternatif untuk masalah hierarki kelas besar komponen menggunakan propagasi nilai variabel agresif yang dikombinasikan dengan tema dan perilaku pewarisan mereka sendiri.

Sejauh ini solusi terbaik untuk masalah ini adalah _selalu_ mendefinisikan variabel sebagai "!default" (dalam istilah Sass). Ini memungkinkan pengguna untuk masuk terlebih dahulu dan menetapkan nilainya sebelum nilai ini digunakan untuk menghitung nilai lebih lanjut. Waktunya kemudian cukup sederhana untuk dikelola bagi pengguna kami. Karena ini selalu terjadi untuk setiap variabel di semua tema kami, kesulitan sintaks seperti yang disarankan di atas akan cukup membebani dan juga rawan kesalahan.

Kami akan senang untuk menyumbangkan fitur lain ke Kurang saat kami melanjutkan. Saya pikir kasus penggunaan skala besar kami (luar biasa?) dapat menjadi validasi yang membantu tentang apa yang diperlukan untuk meningkatkan set bahasa/fitur.

Saya harap Anda akan mempertimbangkan untuk menggabungkan ini atau memberikan beberapa alternatif yang lebih bersifat deklaratif. Memanfaatkan trik ruang lingkup benar-benar tidak akan berhasil bagi kami.

Sekali lagi terima kasih atas waktu dan pertimbangan Anda!

Tampaknya Anda mungkin lebih baik mendefinisikan mixin daripada kelas langsung. Kemudian, variabel dapat diganti di akhir lembar gaya utama Anda atau tema turunan lainnya. Begitulah cara saya dapat mengesampingkan hal-hal seperti lebar selokan saya di kisi saya setelah saya mengimpornya.

Hanya untuk memperjelas kita berbicara tentang variabel di sini saja. Dan kami tidak memiliki lembar gaya utama - kami memiliki satu lembar gaya per kelas per tema. :)

Mungkin saya tidak mengikuti saran Anda, tetapi sebagai contoh, salah satu file variabel tema kami terlihat seperti ini:

$panel-base-color: $neutral-light-color !default;
$panel-header-color: $base-color !default;
$panel-frame-border-width: 1px !default;
$panel-header-font-size: round($font-size * 1.15) !default;
$panel-body-border-color: $neutral-dark-color !default;

$panel-light-header-color: #000 !default;
$panel-light-header-background-color: #fff !default;
$panel-light-tool-background-image: 'tools/tool-sprites-dark' !default;
$panel-light-body-border-color: $neutral-dark-color !default;
$panel-ignore-frame-padding: true !default;

File ini mengatur berbagai nilai Panel untuk tema yang memiliki rantai 4 tema dasar. Tema dasar tersebut memiliki nilai variabelnya sendiri untuk Panel tetapi ini dimuat terlebih dahulu, jadi timpalah. Kecuali jika tema pengguna berasal dari tema ini dan memberikan nilai mereka sendiri.

Pola ini berulang _banyak_ :)

Oke, mengapa tidak menimpa @panel-base-color di lembar utama Anda? Variabel KURANG bersifat global sehingga mana yang terjadi terakhir adalah pemenangnya.

<strong i="7">@import</strong> 'theme.less';

@panel-base-color: red;

Sekarang di mana saja yang digunakan dalam tema akan ditimpa. Jika tidak ada yang mengesampingkan ini di rantai impor Anda, maka apa pun yang awalnya disetel akan menjadi default.

Kami tidak memiliki "lembaran utama yang lebih sedikit" :) Saya menghargai bantuan dan saran Anda, tetapi kami telah melakukan banyak diskusi tentang hal ini secara internal dan cenderung berlanjut sebentar. Cukuplah untuk mengatakan bahwa kami percaya kami membutuhkan pengaturan variabel default seperti yang kami usulkan di sini. Fitur ini ada di Sass dan kami merasa sangat membantu dalam mengurangi kerumitan dan memberikan fleksibilitas kepada pengguna dalam mengonfigurasi tema kami.

Saya ingin tahu apakah semua ini berarti permintaan tarik ini atau turunan serupa akan diterima? Kami akan senang untuk mengubah sintaks jika itu tidak menyenangkan.

Kami tidak memiliki "lembaran utama yang lebih sedikit" :)

Cukup ganti "lembar utama Anda yang lebih sedikit" dalam jawaban di atas dengan "lembar yang lebih sedikit dari pengguna". Sejauh ini tampaknya SASS !default (apapun sintaksnya) diciptakan untuk memecahkan masalah yang tidak ada di KURANG.
@dongryphon , tentu saja saya bisa salah, tetapi Anda belum mengetahui mengapa Anda tidak dapat menggunakan solusi yang disarankan oleh @SomMeri dan @Soviut.

Dengan kata lain, bayangkan jika Anda tidak mengimpor dan malah memiliki semua variabel Anda di lembar yang sama. Itulah yang dilakukan impor secara efektif. Jadi dalam situasi itu, jika Anda memiliki dua deklarasi variabel dengan nama yang sama, yang terakhir di lembar akan menang.

@base-color: green;

div {
    background: @base-color;
}

@base-color: red;

Karena warna dasar dideklarasikan lagi di akhir, warna dasar yang digunakan dalam div akan berwarna merah. Ini akan dikompilasi ke:

div {
    background: red;
}

Ini muncul sebelumnya, sebenarnya saya percaya itu bahkan diterapkan dan kami mendapat permintaan tarik dari orang-orang yang menginginkannya di bootstrap dan mereka setuju setelah beberapa diskusi bahwa itu adalah fitur yang tidak berguna dalam waktu kurang..

Satu-satunya hal yang memungkinkan Anda lakukan adalah agar pengguna mendefinisikan variabel sebelum mengimpor. Jika pengguna mendefinisikan penggantian setelah itu berfungsi seolah-olah itu memiliki default di atasnya .. itu karena bahkan dalam file yang diimpor itu akan mengambil definisi terakhir dengan cara yang sama seperti css, bahkan jika ditentukan setelah penggunaan.

Tidak terlalu membebani pengguna perpustakaan untuk mengatakan bahwa mereka mengganti variabel setelah impor (atau mengimpor file variabel setelah impor) vs menambahkan lebih banyak sintaks ke lebih sedikit.. kami pikir itu adalah salah satu keuntungan dari less, Anda bisa lakukan jumlah yang sama seperti sass tetapi sebagian besar waktu dengan sintaks yang lebih sederhana.

Ini bertentangan dengan apa yang mungkin dipikirkan oleh programmer JavaScript, tetapi ide di baliknya adalah lebih dekat ke css.

Tolong bisakah Anda menjelaskan mengapa meminta konsumen untuk mempertimbangkan pesanan tidak mungkin atau diinginkan? Kami akan menerima fitur dengan kasus penggunaan yang kuat tetapi kami harus ketat untuk menghindari bahasa dan kompleksitas yang membengkak.

Lihat #1109 #1104 #313

Dan hanya untuk memperjelas, kami tidak mengatakan "tidak" dengan cara apa pun. Kami mencoba menunjukkan fitur ini mungkin sudah ada.

Saya menambahkan beberapa info ke less-docs

Menutup sebagai fitur yang sudah tersedia (dalam "Lebih sedikit") (http://lesscss.org/features/#variables-feature-default-variables).

Saya pikir kebingungan ini sering muncul karena sementara ada _syntax_ yang tumpang tindih, SASS "mengeksekusi" dari atas ke bawah tetapi KURANG tidak, dan malah beroperasi lebih seperti CSS. KURANG seperti CSS+ (CSS dengan fitur tambahan), dan SASS seperti "PHP dengan sintaks CSS". Saya ingin tahu apakah ada cara (jika perlu) kita bisa membuat perbedaan itu.

Tolong bisakah Anda menjelaskan mengapa meminta konsumen untuk mempertimbangkan pesanan tidak mungkin atau diinginkan? Kami akan menerima fitur dengan kasus penggunaan yang kuat tetapi kami harus ketat untuk menghindari bahasa dan kompleksitas yang membengkak.

Karena kami mengajarkan pengguna perpustakaan (dan konsumen) untuk tidak pernah mengedit kode perpustakaan sendiri. Fitur !default yang hilang berarti bahwa kita harus melakukan salah satu dari dua hal itu - keduanya sama-sama buruk:

• Pengguna harus mengedit sendiri stylesheet perpustakaan untuk mengedit variabel di mana mereka dideklarasikan (yang merupakan hal terlarang, membuat pembaruan perpustakaan lebih sulit) atau,
• Pustaka harus menyediakan dua lembar gaya: satu untuk variabel default dan satu lagi untuk aturan aktual. Kemudian pengguna harus @import yang pertama, kemudian mendeklarasikan variabelnya sendiri, lalu @import yang kedua. Ini lebih rumit dari yang seharusnya, terutama untuk menyimpan kedua file itu pada versi yang sama.

Pendekatan sass berarti bahwa perpustakaan hanya perlu menyediakan satu file, yang kemudian dapat disesuaikan oleh pengguna.

my-color: red;
<strong i="15">@import</strong> "./my-library.less";

Dari pada:

<strong i="19">@import</strong> "./my-library-variables.less";
my-color: red;
<strong i="20">@import</strong> "./my-library-rules.less";

Saya pikir Anda harus mempertimbangkan kembali masalah ini.

@arcanis Sebenarnya saya tidak mengerti mengapa Anda berpikir seperti itu:

Pustaka harus menyediakan dua lembar gaya: satu untuk variabel default dan satu lagi untuk aturan aktual.
Pendekatan sass berarti bahwa perpustakaan hanya perlu menyediakan satu file

Di Kurang itu benar-benar desain perpustakaan yang sama:

<strong i="11">@import</strong> "./my-library.less";
@my-color: red;

Saya kira Anda hanya melewatkan hal "Lazy-Loading" (dan contoh yang persis sama digunakan dalam dokumen untuk mengatakan no, thanks! ke !default ).

Saya kira Anda hanya melewatkan hal "Lazy-Loading"

@seven-phases-max WTF, Anda benar. Sial, saya mungkin harus menghapus seluruh balasan saya (dan baru saja melakukannya). Anda memberi tahu saya bahwa Anda dapat mengimpor bootstrap, dan hanya mengganti vars tertentu, dan itu hanya akan berfungsi?

Saya tidak mempercayai Anda, dan melakukan tes saya sendiri untuk memverifikasinya. Bagaimana saya melewatkan ini?? Saya pikir itu karena setiap artikel yang saya lihat di Bootstrap, termasuk penyesuaian, merekomendasikan agar Anda menyalin file variable.less dan mengatur nilai Anda sendiri, yang tentu saja menyebabkan masalah ketika lebih banyak variabel ditambahkan ke perpustakaan. Dan saya pikir saya mendapat kesan bahwa penyeleksi sedang dikeluarkan pada titik impor langsung. Apakah variabel selalu "memuat malas" dengan cara ini?

Ini harus menjadi satu-satunya fitur paling penting yang sering terlewatkan di Less. Saya belum pernah melihat posting blog tentang Less or a Less library yang menyebutkan fitur ini. Bahkan dengan semua yang ada di utas di sini, dan dokumentasinya, tidak segera jelas apa artinya dengan perpustakaan dunia nyata. Saya pikir semua orang hanya mengatakan Anda dapat mengganti variabel yang dideklarasikan sebelumnya dengan mengaturnya nanti, dan saya tidak pernah mengerti bahwa itu akan mempengaruhi evaluasi variabel dari dokumen yang diimpor sebelumnya.

Saya tidak percaya saya tidak pernah mendapatkan ini sampai sekarang. Ini pada dasarnya mengubah segalanya tentang bagaimana saya menyusun dokumen saya yang lebih sedikit, dan ini memiliki sedikit penyebutan dalam dokumen yang tidak menunjukkan keluaran.

Mungkin alasan kami mendapatkan begitu banyak permintaan untuk fitur !default di Less adalah karena sedikit orang yang merasakan fitur ini atau memahaminya dari contoh singkat dari dokumen (termasuk saya, tentu saja).

Setidaknya, terima kasih telah menjelaskannya lagi @seven-phases-max!

Ups. Anda benar. Saya juga salah memahami dokumen, ya ampun!

@Soviut , Anda benar-benar jenius! Saya tidak tahu deklarasi variabel berfungsi seperti itu di SASS/KURANG. Terima kasih!

Saya masih menampar dahi saya bahwa ini bukan perilaku yang jelas dengan semua yang saya tulis di Less. Saya pikir masalah saya adalah saya telah melihat contoh artikel yang buruk yang ditulis oleh orang-orang yang tidak mengerti bagaimana melakukannya.

Juga, perhatikan: @spikesagal sejauh pernyataan Anda: "Saya tidak tahu deklarasi variabel berfungsi seperti itu di SASS/KURANG" - Sepengetahuan saya, perilaku variabel tidak sama antara kedua bahasa, karena SASS dan KURANG mengevaluasi berbagai hal dengan sangat berbeda.

Dan mereka mematikan fitur ini di BS4 karena pindah ke Sass... :-1: Masih cukup sedih dengan langkah itu.

Jadi dimulai, perjuangan untuk lebih banyak variabel default: [twbs/bootstrap#17418]

Yah, mereka tidak dapat mematikan fitur Less dengan mengubah sumber SCSS dengan cara apa pun. (Secara teknis itu bahkan bukan "fitur" (seperti semacam "perilaku yang disintesis") tetapi properti mendasar/akibat wajar dari evaluasi malas). Selama ada versi Lebih Sedikit dari BS (itu hanya masalah jumlah orang yang bersedia berkontribusi untuk itu), dan setidaknya ada satu variabel global - Anda akan selalu dapat mengganti variabel itu.

Sehat. Bootstrap v4-alpha resmi pindah ke Sass. Itu, setidaknya dalam pemahaman saya, membunuh lebih sedikit dalam dokumentasi resmi mereka - dan itu berarti juga mematikan dukungan untuk fitur ini karena Sass tidak memiliki variabel pemuatan lambat. Mereka hanya mendukung !default, yang berarti: "Oh ya, kami mengizinkan Anda untuk menimpa variabel kami hanya sekali dari luar, dan hanya jika kami mengizinkannya. Jadi, jika kami lupa memberi Anda akses ke variabel dengan hanya menghilangkan !default, Anda cukup kacau dan harus mengganti seluruh pemilih di file Anda. Tangani itu."

dan itu berarti juga mematikan dukungan untuk fitur ini karena Sass tidak memiliki variabel pemuatan lambat.

Yah, ini hanya berarti "mereka membunuhnya di Bootstrap" (yang jelas merupakan sesuatu di luar cakupan utas ini - selama tidak ada versi BS yang Lebih Rendah, kita seharusnya tidak peduli dengan fitur Bootstrap apa pun di repositori _this_, bukan?).

Karena diskusi ini cukup banyak tentang mengganti variabel di bootstrap...

Kami bertahan dengan lebih sedikit :senyum:

Saya memiliki kasus penggunaan untuk dilema yang dinyatakan semula. Perhatikan contoh sederhana berikut:

1. Saya memiliki lebih sedikit file yang mendefinisikan ukuran font h1, kira-kira seperti ini
   <strong i="8">@font_size__h1</strong> = 30px;
2. Saya memiliki (karena tidak ada frasa yang lebih baik) sebuah plugin yang berisi file KURANG terpisah yang menggunakan deklarasi @font_size__h1 . Jadi saya <strong i="12">@import</strong> (reference) "path/to/file.less"; itu. Tidak masalah, sekarang tersedia.
3. Sekarang saya membawa "plugin" itu ke situs baru yang tidak memiliki @font_size__h1 yang didefinisikan di mana pun. Pada titik ini akan sangat bagus untuk mengatakan "Jika @font_size__h1 didefinisikan, gunakan nilai itu. Jika tidak ditentukan, gunakan nilai yang saya definisikan di sini."

Item 3 saat ini tidak memungkinkan, sejauh yang saya bisa lihat.

@theMikeD

Item 3 saat ini tidak memungkinkan, sejauh yang saya bisa lihat.

Sepertinya Anda belum membaca utasnya:

<strong i="10">@import</strong> "path/to/file.less";
<strong i="11">@import</strong> "here.less"; // if it's not defined <elsewhere>, then use the value I define <here>
<strong i="12">@import</strong> "elsewhere.less";

yang tentunya dapat direduksi menjadi:

<strong i="16">@import</strong> "path/to/file.less"; // <- define default value there
@font-size-h1: foo;          // if it's not defined here then use the value defined above

yang pada dasarnya adalah contoh yang sama dengan http://lesscss.org/features/#variables -feature-default-variables

Iya saya baca threadnya. Sepertinya Anda tidak mengerti apa yang saya tanyakan, karena contoh Anda memiliki pertanyaan saya terbalik.

yang tentunya dapat direduksi menjadi:
@import "path/ke/file.less"; // <- tentukan nilai default di sana
@font-size-h1: foo; // jika tidak didefinisikan di sini maka gunakan nilai yang ditentukan di atas

Ini adalah kebalikan dari apa yang saya butuhkan. Ini akan menimpa nilai @font-size-h1 di path/to/file.less dengan nilai lokal apa pun yang terjadi. Yang saya butuhkan adalah nilai dalam file lokal hanya digunakan jika:
a) path/to/file.less tidak dimuat, atau
b) nilai '@ font_size__h1 is not set in path/to/file.less`

IOW nilai lokal @font-size-h1: foo; akan selalu ada di file lokal, tetapi harus diganti jika disetel di path/to/file.less

Bagaimanapun, saya menemukan solusinya tadi malam, yaitu menetapkan nilai lokal terlebih dahulu, lalu meletakkan pernyataan @import di akhir file, bukan di awal. Jika ditemukan, itu akan menimpa nilai lokal.

Terima kasih.

Sepertinya Anda tidak mengerti apa yang saya tanyakan

Saya lebih suka menyarankan Anda untuk memulai dengan beberapa dasar variabel yang lebih sedikit untuk menyegarkan tampilan Anda:

• Malas-Evaluasi
• Semantik Variabel
• Orang yang Paling Disalahpahami di Dunia...

(karena sepertinya Anda hanya mencoba memikirkan semuanya dengan cara seperti C/PHP yang imperatif, sementara di Less/CSS itu benar-benar "deklaratif terbalik").
Sudah dibicarakan sampai mati selama bertahun-tahun, !default dapat menambahkan _nothing_ baru jika dibandingkan dengan variabel Less overriding asli. Periode. (Kami sudah sering ke sana sebelumnya: jika seseorang berpikir dia menemukan beberapa kasus penggunaan untuk !default di Less, itu tidak berarti apa-apa selain kesalahpahamannya tentang semantik variabel Less).

Yang saya butuhkan adalah nilai dalam file lokal hanya digunakan jika:
a) path/to/file.less tidak dimuat, atau
b) nilai @ font_size__h1 tidak diatur dalam path/to/file.less

Maka sebaliknya:

@font-size-h1: foo;
<strong i="27">@import</strong> "path/to/file.less"; 

tada!

...di situlah saya mendarat, seperti yang saya katakan.

Saya akan menyarankan artikel yang saya tulis dan kemudian melihat @seven-phases-max telah menautkannya. Percayalah pada kami, apa yang Anda minta sudah ada! Tetapi Anda harus memahami evaluasi variabel Less untuk memahami bagaimana/mengapa itu ada.

Saya memiliki komponen - yang merupakan kisi data. Komponen ini harus memiliki gaya default - ditentukan oleh paket komponen. Tetapi jika variabel tertentu dari luar sudah ditentukan yang harus diprioritaskan.

tanpa aplikasi
/grid/grid.less

Karena grid adalah sebuah komponen, lupakan menambahkan apapun di sini - atau menambahkan kode apapun setelah file grid.less.
Saya tidak melihat betapa kurang mencakup masalah ini. Scss menawarkan fitur ini untuk alasan yang bagus.

@geri777

Tetapi jika variabel tertentu dari luar sudah ditentukan yang harus diprioritaskan.

Kurang mengevaluasi seperti CSS.

.css {  
  --color: blue;
  color: var(--color);  // --color will be red
  --color: red;
  border-color: var(--color);  // --color will still be red, red is the scope's final value
}

.less {  
  <strong i="10">@color</strong>: blue;
  color: @color;  // <strong i="11">@color</strong> will be red
  <strong i="12">@color</strong>: red;
  border-color: @color;  // <strong i="13">@color</strong> will still be red, red is the scope's final value
}
````

Scss, instead, doesn't mimic CSS evaluation and instead evaluates more like, say, PHP.

```scss
.scss {  
  $color: blue;
  color: $color;  // $color will be blue
  $color: red;
  border-color: $color;  // $color will be red
}

Jadi, di Sass/SCSS, untuk mengganti nilai variabel root, Anda terpaksa melakukan dua hal:

1. Anda harus menandai semua deklarasi variabel Anda dengan !default
2. Anda harus memasukkan vars global Anda sebelum deklarasi default ini.

Seperti dalam:

// main.scss
<strong i="22">@import</strong> "overrides.scss";
<strong i="23">@import</strong> "library.scss";

// overrides.scss
$color: red;

// library.scss
$color: blue !default;

.scss {
  color: $color;
}

Di Kurang, bertema jauh lebih mudah. Anda (biasanya) tidak perlu mengubah apa pun tentang perpustakaan Anda, Anda hanya perlu meletakkan penggantian Anda setelahnya. Anda hanya perlu melakukan satu hal.

// main.less
<strong i="27">@import</strong> "library.less";
<strong i="28">@import</strong> "overrides.less";

// overrides.less
<strong i="29">@color</strong>: red;

// library.less
<strong i="30">@color</strong>: blue;

.less {
  color: @color;
}

Oleh karena itu, Anda tidak perlu !default karena Less akan selalu menerima nilai akhir Anda.

Pikirkan Kurang evaluasi seperti kaskade CSS. Ini hanya bekerja. Deklarasi terakhir menang.