Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencapai Interpolasi Nama Harta dalam KURANG?
Bagaimanakah kita boleh meniru tingkah laku ini dalam LESS dengan keupayaan unik seperti e() dan @{ }?
Dalam LESS, interpolasi nama hartanah tidak disokong secara langsung. Walau bagaimanapun, terdapat penyelesaian menggunakan campuran parametrik dan padanan corak:
.vendors(@property, @value, @pre: ect) { -inj:~"@{pre}; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}"; }
Penggunaan:
.test-class{ .vendors(transform, matrix(1,0,0,1,20,20)); .vendors(transform-origin,"10px 10px"); }
Setakat v1.3.3
.vendors(@property, @value, @rest:"") { @inject:~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value};"; }
.test(@nextclass){ .vendors(transform, "matrix(2,0,0,2,20,20)"); .vendors(transform-origin,"10px 10px", @inject); (~"{@{inject}} .@{nextclass}"){/*next class properties*/}; }
Balutkan dalam kelas:
.this-class{ .test(next-class); }
@nl: `"\n\t"`; .multi(@props,@vals,1,@inj) { @property: extract(@props, 1); @value: extract(@vals, 1); @inject:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};"; } .multi(@props,@vals,@i,@inj:"") when (@i > 0) { @property: extract(@props, @i); @value: extract(@vals, @i); @injnext:~"@{inj}@{nl}-webkit-@{property}: @{value};@{nl}-moz-@{property}: @{value};@{nl}-ms-@{property}: @{value};@{nl}-o-@{property}: @{value};@{nl}@{property}: @{value};"; .multi(@props,@vals,(@i - 1),@injnext); }
Penggunaan:
// properties and values for vendors @properties: "transform-origin" "transform"; @values: "10px 10px" "matrix(2,0,0,2,20,20)"; .this-class { .multi(@properties,@values,2,@p); @inj: ~"{@{inject}`'\n'`} `'\n'`.next-class "; @{inj} {/**/} }
Atas ialah kandungan terperinci Bagaimana untuk Mencapai Interpolasi Nama Harta dalam KURANG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!