การรวบรวมเชิงรุกน้อยกว่าด้วย CSS3 calc

336

หักคอมไพเลอร์ที่ผมใช้ ( OrangeBitsและdotless 1.3.0.5 ) จะอุกอาจแปล

body { width: calc(100% - 250px - 1.5em); }

เข้าไป

body { width: calc(-151.5%); }

ซึ่งเห็นได้ชัดว่าไม่ต้องการ ฉันสงสัยว่ามีวิธีส่งสัญญาณไปยังผู้รวบรวมน้อยกว่าหรือไม่เพื่อเพิกเฉยต่อแอตทริบิวต์ในระหว่างการรวบรวม ฉันค้นหาเอกสารน้อยกว่าและเอกสารของทั้งสองคอมไพเลอร์และฉันไม่พบอะไรเลย

คอมไพเลอร์น้อยลงหรือน้อยลงสนับสนุนสิ่งนี้หรือไม่

ถ้าไม่มีจะมีตัวขยาย CSS ที่ใช้งานได้หรือไม่

— นิคแบ็บค้อก
แหล่งที่มา

9

คุณแน่ใจหรือว่าไม่ต้องการคอมไพเลอร์ที่ก้าวร้าวน้อยลง?

— fiatjaf

ฉันก็แน่ใจเช่นกันเพื่อให้คอมไพเลอร์ก้าวร้าวมากขึ้น! (การปฏิเสธสองครั้งในความคิดเห็นก่อนหน้าทำให้ฉันสับสน;)) (ดังนั้นการลงคะแนนของฉันเช่นกันสำหรับคุณสมบัติที่ดีด้านล่าง)

— Andreas Dietrich

530

หักไม่ประเมินภายในแสดงออกโดยเริ่มต้นตั้งแต่calcv3.00

คำตอบเดิม ( Less v1.x...2.x):

ทำเช่นนี้:

body { width: calc(~"100% - 250px - 1.5em"); }

ใน Less 1.4.0 เราจะมีstrictMathsตัวเลือกที่ต้องการการคำนวณน้อยกว่าทั้งหมดอยู่ในวงเล็บดังนั้นการcalcทำงานจะเป็น "out-of-the-box" นี่คือตัวเลือกเนื่องจากเป็นการเปลี่ยนแปลงครั้งสำคัญ เบต้าตอนต้นของ 1.4.0 มีตัวเลือกนี้เป็นค่าเริ่มต้น รุ่นที่วางจำหน่ายจะปิดใช้งานตามค่าเริ่มต้น

— หน้าลุค
แหล่งที่มา

2

โปรดทราบว่าหากคุณกำลังคอมไพล์น้อยลงด้วยการหยุดพักของตัวสั่นด้วยความตื่นเต้นมันจะละเว้นการหลบหนีนี้ อย่างน้อยในเวลาที่เขียนความคิดเห็นนี้

— Attila Fulop

1

ฉันพยายามcalc(100% - 50px)ใน less.css 1.4.0 calc(50%)และผลที่ได้ก็คือ ~"..."เคล็ดลับที่น่ากลัวยังคงใช้งานได้ แต่ฉันสับสนกับคำสั่ง "นอกกรอบ" ซึ่งทำให้ฉันคิดว่าข้างต้นจะได้ผล ลุคสนับสนุนการcalcเปลี่ยนแปลงใน Less 1.4.0 อย่างไร ขอบคุณ!

— Brian M. Hunt

2

คำถามคือทำไม less.js พยายามคำนวณสิ่งนี้ตั้งแต่แรก? ควรทิ้งข้อผิดพลาดสำหรับ "100% - 250px" เนื่องจากไม่สามารถคำนวณคำตอบที่สมเหตุสมผลได้

— mpen

72

สำหรับผู้อ่านในอนาคตคุณยังสามารถหลบหนีจากตัวดำเนินการซึ่งทำให้คุณสามารถใช้ตัวแปรได้เช่นกัน ตัวอย่าง:calc(@somePercent ~"-" @someLength)

— 0b10011

10

แทนที่จะคิดผิดน้อยกว่านี้หรือทำให้เกิดข้อผิดพลาดทำไมมันถึงไม่เข้าใจในสิ่งที่ผู้ใช้พยายามทำและทิ้งไว้คนเดียว? เห็นได้ชัดว่าเปอร์เซ็นต์และค่าพิกเซลไม่สามารถคำนวณร่วมกันได้ในจำนวนที่น้อยลง

— dfmiller

37

การคำนวณแคลอรี่ทั่วไปนั้นใช้ความกว้าง 100% และเพิ่มระยะขอบรอบ ๆ องค์ประกอบ

สามารถทำได้ด้วย:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

— เซบาสเตียน Lorber
แหล่งที่มา

-o-calc- ยังไม่รองรับ

— อีก

28

มีตัวเลือกการหลบหนีหลายตัวที่มีผลลัพธ์เหมือนกัน:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

— icl7126
แหล่งที่มา

9

มีวิธีที่เป็นระเบียบมากขึ้นในการรวมตัวแปรต่างๆภายใน Calc ที่หลบหนีตามที่อธิบายในโพสต์นี้: ฟังก์ชั่น CSS3 () ไม่ทำงานกับ # 974 น้อย

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

ด้วยการใช้วงเล็บปีกกาคุณไม่จำเป็นต้องปิดและเปิดคำพูดที่หนีออกมาอีกครั้ง

— brohr
แหล่งที่มา