ฉันมีตัวเลือก scss สองตัวที่ฉันใช้จำนวนบวกและลบเท่ากันดังใน:
padding: 0 15px 15px;
margin: 0 -15px 20px -15px;
ฉันต้องการใช้ตัวแปรสำหรับจำนวน 15px ทั้งหมด แต่ไม่ได้ผล:
$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;
จำนวนมาร์จิ้นจะแปลงเป็นจำนวนบวก ฉันพลาดอะไรไปรึเปล่า?
คำตอบ:
ลองเป็นแบบนี้
margin: 0 (-$pad) 20px (-$pad);วิธีแก้ปัญหาที่มีเหตุผลมากขึ้นตามแนวทาง sass คือinterpolateตัวแปรเช่นตัวอย่างต่อไปนี้:
margin: 0 -#{$pad} 20px -#{$pad};ตัวอย่าง: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293
ฉันกำลังเพิ่มสองเพนเน ธ ของฉันหลังจากพิจารณาสองคำตอบก่อนหน้านี้ แต่จากนั้นอ่านสิ่งนี้ (ของฉันเน้น)
คุณควรโดยเฉพาะอย่างยิ่งหลีกเลี่ยงการใช้การแก้ไขเช่น
#{$number}pxนี่ไม่ได้สร้างตัวเลขจริงๆ! สร้างสตริงที่ไม่มีเครื่องหมายคำพูดที่ดูเหมือนตัวเลข แต่จะไม่ทำงานกับการดำเนินการหรือฟังก์ชันตัวเลขใด ๆ พยายามที่จะทำให้หน่วยทำความสะอาดเพื่อให้คณิตศาสตร์ของคุณ$numberแล้วมีหน่วยหรือเขียนpx$number * 1px
ดังนั้นฉันเชื่อว่าวิธีที่ถูกต้องจะเป็นดังนี้ซึ่งจะรักษาความสามารถทางคณิตศาสตร์ของ SASS / SCSS:
$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;