การคำนวณความกว้างจากเปอร์เซ็นต์ถึงพิกเซลแล้วลบด้วยพิกเซลใน LESS CSS

ฉันจะคำนวณความกว้างในองค์ประกอบจากร้อยละพิกเซลดังนั้นฉันจะลบ -10px ผ่านการใช้น้อยลงและขจัดตะกรัน () มันเป็นไปได้?

div {
    span {
        width:calc(100% - 10px);
    }
}

ฉันใช้ CSS3 calc()ดังนั้นจึงไม่ทำงาน:calc(100% - 10px)

ตัวอย่าง:ถ้า 100% = 500px ดังนั้น width = 490px (500-10);

ฉันทำการสาธิตสำหรับการทดสอบ: http://jsfiddle.net/4DujZ/55/

ดังนั้นช่องว่างภายในจะพูดว่า: 5 (10px / 2) ตลอดเวลาเมื่อฉันปรับขนาด

ฉันสามารถทำได้ในLESSหรือไม่? ฉันรู้วิธีทำใน jQuery และ CSS ง่ายๆเช่นการเว้นระยะขอบหรืออื่น ๆ ... แต่ฉันจะพยายามทำงานในLESSด้วยcalc()

คุณสามารถหลีกเลี่ยงcalcอาร์กิวเมนต์เพื่อป้องกันไม่ให้ประเมินจากการคอมไพล์

จากตัวอย่างของคุณคุณก็จะล้อมรอบอาร์กิวเมนต์ดังนี้:

calc(~'100% - 10px')

การสาธิต: http://jsfiddle.net/c5aq20b6/

ฉันพบว่าฉันใช้สิ่งนี้ด้วยหนึ่งในสามวิธีต่อไปนี้:

การหลบหนีขั้นพื้นฐาน

ทุกสิ่งภายในcalcอาร์กิวเมนต์ถูกกำหนดเป็นสตริงและเป็นแบบคงที่ทั้งหมดจนกว่าจะได้รับการประเมินโดยไคลเอนต์:

อินพุตน้อย

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

เอาต์พุต CSS

div > span {
  width: calc(100% - 10px);
}

การแก้ไขตัวแปร

คุณสามารถแทรกตัวแปร LESS ลงในสตริง:

อินพุตน้อย

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

เอาต์พุต CSS

div > span {
  width: calc(100% - 10px);
}

การผสมค่าที่หลบหนีและรวบรวม

คุณอาจต้องการหลีกเลี่ยงค่าเปอร์เซ็นต์ แต่ลองประเมินบางอย่างในการรวบรวม:

อินพุตน้อย

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

เอาต์พุต CSS

div > span {
  width: calc((100% - 10px) - 80px);
}

ที่มา: http://lesscss.org/functions/#string-functions-escape

ฉันคิดว่าwidth: -moz-calc(25% - 1em);เป็นสิ่งที่คุณกำลังมองหา และคุณอาจต้องการให้ลิงก์นี้ดูเพื่อขอความช่วยเหลือเพิ่มเติม

หรือคุณสามารถใช้แอตทริบิวต์ margin ดังนี้:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

ลองสิ่งนี้:

width:auto;
margin-right:50px;