Menggabungkan beberapa entri transformasi dalam Less

Saya memiliki dua mixin yang keduanya dikonversi menjadi -webkit-transform:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

Saat saya menggunakannya bersama-sama:

div {
  .rotate(15deg);
  .scale(2);
}

... mereka (seperti yang diharapkan) muncul sebagai:

div {
  -webkit-transform: rotate(15deg);
  -webkit-transform: scale(2);
}

Tampaknya ini bukan CSS yang valid karena yang kedua lebih diutamakan daripada yang pertama; yang pertama dibuang. Untuk menggabungkan transform entri seharusnya:

-webkit-transform: rotate(15deg) scale(2);

Bagaimana saya bisa membuat CSS tersebut dihasilkan oleh LESS, yaitu beberapa entri transform yang digabungkan dengan benar?


css less css-transforms combinations
person pimvdb    schedule 09.03.2012    source sumber
comment
bisakah Anda memberikan fiddle?   -  person Alp    schedule 10.03.2012
comment
@Alp: Saya tidak yakin bagaimana harus meletakkan kode KURANG di sana. Sepertinya hanya CSS dan SCSS yang tersedia. Menempatkan <link> ke file .less eksternal menghasilkan kesalahan lintas domain.   -  person pimvdb    schedule 10.03.2012
comment
Saya tahu ini agak terlambat, tetapi alasan kesalahan lintas domain adalah server Anda tidak mengirimkan kembali header CORS yang benar. JSFiddle tidak perlu melakukan apa pun dalam hal ini, kecuali Anda ingin mengirimkan otentikasi, yang harus Anda koordinasikan dengan JSFiddle untuk melakukannya, dan mungkin tidak layak untuk dilakukan.   -  person trysis    schedule 02.10.2015
comment
@TylerH - Saya akan mengembalikan hasil edit Anda. Less sudah ditentukan sebagai tag Q sehingga tidak boleh muncul di judul (perhatikan juga nama resminya Less bukan LESS).   -  person seven-phases-max    schedule 28.10.2015
comment
@ seven-phases-max Pengeditannya adalah untuk memperjelas pencarian pada subjek bahwa pertanyaan ini tidak berguna untuk aplikasi non-Less. Kalau tidak, saya setuju bahwa Less tidak boleh ada dalam judul.   -  person TylerH    schedule 28.10.2015

Jawaban (4)


arrow_upward
8
arrow_downward

Berikan transformasi Anda sebagai argumen untuk satu mixin:

.transform(@scale,@rotate) {
  -webkit-transform: @arguments;
}

Saya kira, Anda juga bisa menggabungkan mixin Anda yang terpisah menjadi satu dengan bantuan penjaga, tapi saya tidak sepenuhnya yakin;)

Saya pikir Anda tidak dapat mencapai ini dengan cara lain, karena parser harus mengubah kode setelahnya yang seharusnya tidak dapat dilakukan.

person Christoph    schedule 10.03.2012
comment
Terima kasih, ini berhasil, meskipun saya tidak sepenuhnya antusias melakukannya. Tapi itu akan berhasil jika tidak ada pilihan lain. - person pimvdb; 10.03.2012
comment
Saya mengajukan permintaan di sini, namun belum banyak kemajuan. - person pimvdb; 19.10.2012
comment
hm, apa yang dikatakan ninique pada dasarnya sama dengan yang saya usulkan. Saya tidak berpikir mereka akan menerapkan fitur seperti itu karena bertentangan dengan paradigma sifat utama css dan akan menimbulkan banyak masalah... - person Christoph; 19.10.2012
comment
Ya, menurut saya sebenarnya kesalahan CSS adalah tidak mendefinisikan rotation: 25deg; scale: 2; atau semacamnya. - person pimvdb; 20.10.2012

arrow_upward
9
arrow_downward

Mulai dari Less v1.7.0, menggabungkan nilai properti dengan pemisah spasi dapat dilakukan dan di sana tidak perlu menggabungkan dua mixin menjadi satu.

Kode Kurang di bawah ini

.rotate(@deg) {
  -webkit-transform+_: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform+_: scale(@factor);
}

div{
    .rotate(45deg);
    .scale(1.5);
}

akan dikompilasi ke dalam CSS berikut:

div {
  -webkit-transform: rotate(45deg) scale(1.5);
}
person Harry    schedule 04.11.2014
comment
Apakah ada yang serupa di Sass (SCSS)? - person tonix; 10.05.2019

arrow_upward
3
arrow_downward

Saya pikir ada cara sederhana untuk mengatasinya, buat wadah div untuk elemen, dan terapkan transformasi pertama ke wadah, sisakan yang kedua untuk elemen itu sendiri

person user1878697    schedule 11.12.2012

arrow_upward
1
arrow_downward

Saya mengalami masalah dalam membuat @arguments berfungsi. Saya menggunakan @rest variabel yang berhasil

Contoh KURANG:

.transform(@rest...) {
   transform: @rest;
   -ms-transform: @rest;
   -webkit-transform: @rest;
}

.someClass{
   .transform(translate3D(0,0,0),scale(1,1));
}

.otherClass{
   .transform(translate3D(0,0,0),rotate(1,1));
}

.anotherClass{
   .transform(rotate(1,1));
}

CSS keluaran:

.someClass {
  transform: translate3D(0, 0, 0) scale(1, 1);
  -ms-transform: translate3D(0, 0, 0) scale(1, 1);
  -webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
  transform: translate3D(0, 0, 0) rotate(1, 1);
  -ms-transform: translate3D(0, 0, 0) rotate(1, 1);
  -webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
  transform: rotate(1, 1);
  -ms-transform: rotate(1, 1);
  -webkit-transform: rotate(1, 1);
}
person brandon    schedule 09.04.2014