การรวมรายการการแปลงหลายรายการเข้าด้วยกันใน Less

ฉันมีมิกซ์อินสองตัวซึ่งทั้งคู่แปลงเป็น -webkit-transform:

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

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

เมื่อฉันใช้มันร่วมกัน:

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

... พวกเขา (ตามที่คาดไว้) ปรากฏเป็น:

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

ดูเหมือนว่าจะไม่ใช่ CSS ที่ถูกต้องเนื่องจากอันที่สองมีความสำคัญมากกว่าอันแรก อันแรกจะถูกทิ้งไป หากต้องการรวม transform รายการ ควรเป็น:

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

ฉันจะทำให้ CSS ดังกล่าวถูกสร้างขึ้นโดย LESS เช่น transform หลายรายการที่รวมกันอย่างถูกต้องได้อย่างไร


css less css-transforms combinations
person pimvdb    schedule 09.03.2012    source แหล่งที่มา
comment
คุณช่วยระบุ ซอ ได้ไหม   -  person Alp    schedule 10.03.2012
comment
@Alp: ฉันไม่แน่ใจว่าจะใส่โค้ด LESS ไว้ที่ไหน ดูเหมือนว่ามีเพียง CSS และ SCSS เท่านั้น การวาง <link> ลงในไฟล์ .less ภายนอกทำให้เกิดข้อผิดพลาดข้ามโดเมน   -  person pimvdb    schedule 10.03.2012
comment
ฉันรู้ว่ามันสายไปแล้ว แต่สาเหตุของข้อผิดพลาดข้ามโดเมนก็คือเซิร์ฟเวอร์ของคุณไม่ได้ส่งส่วนหัว CORS ที่ถูกต้องกลับมา JSFiddle ไม่จำเป็นต้องทำอะไรในกรณีนี้ เว้นแต่คุณต้องการให้มันส่งการรับรองความถูกต้อง ซึ่งคุณจะต้องประสานงานกับ JSFiddle ให้ทำ และอาจจะไม่คุ้มค่าที่จะทำ   -  person trysis    schedule 02.10.2015
comment
@TylerH - ฉันจะคืนค่าการแก้ไขของคุณ Less ได้รับการระบุเป็นแท็กของ Q ดังนั้นจึงไม่ควรปรากฏในชื่อเรื่อง (โปรดทราบว่าชื่ออย่างเป็นทางการคือ Less not LESS)   -  person seven-phases-max    schedule 28.10.2015
comment
@ เจ็ดเฟส-max การแก้ไขคือเพื่อให้ชัดเจนสำหรับการค้นหาในหัวข้อว่าคำถามนี้ไม่มีประโยชน์สำหรับแอปพลิเคชันที่ไม่ใช่น้อย ไม่อย่างนั้นฉันก็ยอมรับว่า Less ไม่ควรอยู่ในชื่อ   -  person TylerH    schedule 28.10.2015

คำตอบ (4)


arrow_upward
8
arrow_downward

ระบุการแปลงของคุณเป็นอาร์กิวเมนต์สำหรับมิกซ์อินเดียว:

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

ฉันเดาว่า คุณสามารถเชื่อมโยงมิกซ์อินที่แยกจากกันของคุณเข้าด้วยกันเป็นหนึ่งเดียวได้ด้วยความช่วยเหลือจากการ์ด แต่ฉันไม่แน่ใจทั้งหมด ;)

ฉันคิดว่าคุณไม่สามารถบรรลุเป้าหมายนี้ได้ด้วยวิธีอื่น เนื่องจาก parser จะต้องแก้ไขโค้ดในภายหลังซึ่งไม่ควรเป็นไปได้

person Christoph    schedule 10.03.2012
comment
ขอบคุณ มันได้ผล แม้ว่าฉันจะไม่กระตือรือร้นกับมันอย่างเต็มที่ก็ตาม แต่จะทำถ้าไม่มีทางเลือกอื่น - person pimvdb; 10.03.2012
comment
ฉันยื่นคำขอแล้วที่นี่ แต่ยังไม่มีความคืบหน้ามากนัก - person pimvdb; 19.10.2012
comment
อืม สิ่งที่ ninique ระบุไว้นั้นโดยพื้นฐานแล้วเป็นสิ่งเดียวกับที่ฉันเสนอ ฉันไม่คิดว่าพวกเขาจะใช้คุณสมบัติดังกล่าวเพราะมันขัดแย้งกับกระบวนทัศน์ของลักษณะที่เหนือกว่าของ css และจะทำให้เกิดปัญหามากมาย... - person Christoph; 19.10.2012
comment
ใช่แล้ว ในความคิดของฉัน จริงๆ แล้วมันเป็นความผิดพลาดของ CSS ที่ไม่นิยาม rotation: 25deg; scale: 2; หรืออะไรทำนองนั้น - person pimvdb; 20.10.2012

arrow_upward
9
arrow_downward

เริ่มต้นจาก Less v1.7.0 สามารถรวมค่าคุณสมบัติ ด้วยตัวคั่นช่องว่างได้ และ ไม่จำเป็นต้องรวมสองมิกซ์อินเป็นอันเดียว

โค้ด Less ด้านล่าง

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

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

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

จะคอมไพล์เป็น CSS ต่อไปนี้:

div {
  -webkit-transform: rotate(45deg) scale(1.5);
}
person Harry    schedule 04.11.2014
comment
มีอะไรที่คล้ายกันใน Sass (SCSS) หรือไม่? - person tonix; 10.05.2019

arrow_upward
3
arrow_downward

ฉันคิดว่ามีวิธีง่ายๆ ในการสร้างคอนเทนเนอร์ div สำหรับองค์ประกอบ และใช้การแปลงครั้งแรกกับ cntainer โดยปล่อยให้อันที่สองสำหรับองค์ประกอบนั้นเอง

person user1878697    schedule 11.12.2012

arrow_upward
1
arrow_downward

ฉันประสบปัญหาในการทำให้ @arguments ทำงาน ฉันใช้ @rest ตัวแปร ซึ่งทำหน้าที่ได้

ตัวอย่างน้อย:

.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:

.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