Less.js: Membuat Fungsi Kustom

Mungkin untuk membedakannya dari campuran dan tetap lebih dekat dengan sintaks CSS, bisa jadi:

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

Jenis seperti variabel yang tergantung pada parameter (yang jika Anda pikirkan adalah jenis fungsi =)

+1 ke sintaks @souldreamer .

Tetapi dengan sintaks @souldreamer tidak mungkin untuk menulis beberapa
nilai ke dalam variabel dan menggunakannya lagi.

dapat menggunakan sintaks ini:

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

mungkinkah di versi yang lebih baru untuk melakukan sesuatu seperti ini:

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

Saya memiliki kebutuhan yang sama untuk menggunakan semacam fungsi untuk mengembalikan nilai. Saya pikir ada dua kemungkinan solusi. Salah satu solusinya adalah dengan memperluas sintaks variabel seperti @Deltachaos yang diuraikan di atas, yang pada dasarnya adalah:

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

Pendekatan kedua adalah menggunakan mixin. Karena kompilator tetap memperlakukan mixin sebagai fungsi JavaScript, _menambahkan fitur return ke mixin_ kemungkinan akan menjadi solusi sederhana. Berikut tampilannya:

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

"Petunjuk fungsional" SASS memberikan hasil yang serupa, meskipun saya yakin solusi mixin ini akan jauh lebih elegan.

Masalah 508 dan 609 juga terkait dengan ini.

Saya pikir sintaks kedua @tylertate akan menjadi yang terbaik. Saya tampaknya menjadi yang termudah karena seperti yang Anda katakan, less sudah mem-parsing mixin sebagai JavaScript.

Apakah ada yang berpikir seperti ini mungkin dengan mixin?

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

Saya lebih suka melihat sesuatu seperti sintaks plugin KURANG yang ditentukan, dan memindahkan logika seperti pemrograman ke plugin JavaScript KURANG. Saran ini tidak konsisten dengan sintaks dan desain KURANG saat ini.

Setuju .. ada bug tentang dokumentasi yang ditandai itu karena relatif mudah untuk menambahkan fungsi ketika Anda tahu caranya.

Jadi apa resolusinya?

Kita perlu mendokumentasikannya. lihat https://github.com/cloudhead/lesscss.org/issues/54

dan masalah tertaut dari less.js menunjukkan bagaimana Anda dapat menambahkan fungsi ke less di browser

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

saat ini tidak ada cara untuk memasukkan fungsi ke dalam versi node, tetapi seharusnya ada

Terima kasih, saya menghargai tanggapan dan posisi untuk mengeluarkan JavaScript dari sintaks KURANG.

Namun, tidak dipaksa untuk mengaitkan nilai pengembalian mixin dengan properti tertentu sepertinya merupakan kasus penggunaan yang jelas. Siapa pun yang menggunakan kisi akan ingin melakukan apa yang coba dilakukan @Deltachaos . Akan sangat bagus untuk dapat mencapai ini tanpa turun ke tingkat membuat plugin.

Ini hal yang rumit - jika Anda perlu memiliki loop atau jika perlu hidup di plugin.

Namun jika memanggil 3 fungsi lebih sedikit dengan nilai tertentu, saya setuju masuk akal untuk dapat mengekstraknya di dalam lebih sedikit untuk membuat sintaks KERING - tidak masuk akal harus menulis plugin untuk mengekstrak fakta bahwa Anda ingin menggelapkan sebesar 5% menjadi satu tempat.

Saya telah membuka kembali tetapi ini mungkin diduplikasi di tempat lain, kita akan lihat.

saat ini variabel dari lingkup mixin semua disalin ke lingkup luar - yang merupakan semacam cara untuk mengembalikan variabel .. tetapi itu menyebabkan masalah yang mengerikan dan saya ingin menghapusnya.

duplikat #538

"variabel dari lingkup mixin semua disalin ke lingkup luar"

Benarkah? Ya, mari kita hilangkan perilaku itu. Saya lebih suka variabel ditandai untuk ekspor, atau hal lain daripada hanya bocor otomatis. Itu bukan perilaku yang diharapkan bagi saya. Variabel harus dalam cakupan blok.

ya, itu seperti fungsi pendukung melalui bug pintu belakang

Saya menemukan peretasan: jika Anda mendeklarasikan fungsi js global, Anda dapat menggunakannya nanti!

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain baru saja menemukan peretasan yang sama :)

@fabienevain Ini bekerja dengan baik, terima kasih~ :+1:

Saya menemukan bahwa Anda dapat membuat fungsi aktual dari eval jail yang sama dengan mengakses process.mainModule... Satu-satunya hal yang menarik adalah Anda mungkin harus mengulangi lebih dari process.mainModule.children dan mencocokkan less.js jika urutan itu karena alasan tertentu berubah masa depan. Saya berencana untuk tidak mengulangi hanya secara membabi buta kurang mempercayai modul ketiga.

Sayangnya Anda tidak dapat mengakses require , tetapi Anda dapat mengakses fs dan lainnya yang sudah dibutuhkan oleh less, yang cukup banyak:

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

Hal yang menarik tentang memiliki fungsi nyata adalah variabel context , yang berisi detail menarik seperti file yang sedang diproses sehingga Anda dapat, misalnya, membuat data svg sendiri, uri impor dengan pengaturan, dll.

Sunting Saya bertanya-tanya mengapa backticks bahkan diperkenalkan jika JS dicoba untuk dijauhkan. Saya suka KURANG saya sebagai copy & pasteable mungkin jadi plugin tidak baik untuk saya.

Saya suka KURANG saya sebagai copy & pasteable mungkin jadi plugin tidak baik untuk saya.

Jadi Anda menganggap kode Anda _is_ "copy&pasteable" bahkan jika Anda memerlukan kompiler less.js berbasis node.js di peretasan backtick inline Anda, tetapi pada saat yang sama merasa itu salah jika Anda akan menggunakan plugin? Doh!

@seven-phases-max alat saya cukup kacau. Jika saya dapat mengontrol argumen baris perintah lessc, saya mungkin akan menggunakan plugin. (Atau punya satu plugin master tempat saya memasukkan semuanya) Tapi tidak, saya telah mengacaukan lingkungan saya, dan saya memiliki ~ 100 tema WP di ruang kerja Eclipse yang tidak dapat saya singkirkan karena semua perintah build dll macet di sana .

@Ciantic Pertama-tama Anda tidak memerlukan opsi baris perintah tertentu untuk menggunakan plugin fungsi khusus - jika perlu (#2479). Sekunder Saya ragu lingkungan apa pun yang sangat kacau yang melarang Anda untuk mengontrol opsi kompiler (setelah semua lessc "executable" hanyalah skrip konsol OS yang mengarahkan ke skrip simpul aktual - sehingga orang dapat dengan mudah menyuntikkan _anything_ di sana dengan satu atau lain cara).

Either way komentar saya hanya tentang "copy&pasteable vs plugins" adv. sementara itu ternyata hanya solusi untuk alat/rantai build yang rusak.

@seven-phases-max import plugin terlihat persis seperti alat yang saya butuhkan! Meskipun saya ingin mendefinisikan fungsi di dalam proyek saya, bukan di registri global, dengan cara ini saya dapat mengedit fungsi di dalam proyek dan tidak khawatir akan merusak miliaran file jika saya membuat perubahan ke fungsi global.

@Ciantic

Meskipun saya ingin mendefinisikan fungsi di dalam proyek saya, bukan di registri global, dengan cara ini saya dapat mengedit fungsi di dalam proyek dan tidak khawatir akan merusak miliaran file jika saya membuat perubahan ke fungsi global.

Baca lebih lanjut di. Draf awal permintaan tarik saya menempuh rute pendaftaran global yang mudah, tetapi dengan beberapa wawasan yang diperoleh, saya kemudian menyempurnakannya untuk melakukan pendaftaran lingkup-lokal. Misalnya

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

tidak akan membocorkan my-func luar lingkup mixin. Path tentu saja juga relatif terhadap file yang berisi deklarasi @plugin , jadi semuanya dibundel dengan rapi dan dapat dikirim untuk dikonsumsi oleh pihak ketiga; 100% _transparan_.

Itulah tujuan desain saya untuk fitur ini. ^_^

less.js diperlukan untuk menambahkan kombinasi warna khusus
masalah terjadi selama komit kode
itu mendukung tetapi membutuhkan lebih sedikit.js

Saya menemukan peretasan: jika Anda mendeklarasikan fungsi js global, Anda dapat menggunakannya nanti!

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain Bagaimana saya bisa menggunakan lebih sedikit fungsi di @fn ? Seperti hsvsaturation unit dan seterusnya .Thx.

@hiyangguo

Anda tidak boleh menggunakan ekspresi JS sebaris, titik.
Bangun dan daftarkan fungsi khusus dengan cara yang sesuai.
Baca dokumentasi. Semuanya ada di sana: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten OK, terima kasih banyak.