คำนวณเปอร์เซ็นต์ด้วย SCSS / SASS

121

ฉันต้องการกำหนดความกว้างเป็นเปอร์เซ็นต์ใน scss ผ่านการคำนวณ แต่มันทำให้ฉันมีข้อผิดพลาด ..

CSS ไม่ถูกต้องหลัง "...- width: (4/12)%": นิพจน์ที่คาดหวัง (เช่น 1px ตัวหนา) คือ ";"

ฉันต้องการทำสิ่งที่ชอบ

$my_width: (4/12)%;

div{
width: $my_width;
}

ฉันจะเพิ่ม% sign in ที่นั่นได้อย่างไร

คำถามเดียวกันกับ px และ em

css sass

— Nick Ginanto
แหล่งที่มา

ไม่มีอะไรต้องซอ ฉันแค่ต้องการเพิ่มหน่วยของตัวเลขในการคำนวณ เหมือนกับ (400/20) px ฉันจะมีตัวเลขและ px / em /% ใน scss ได้อย่างไร ด้วยวิธีนี้ฉันสามารถมี "ตัวแปรทั่วโลก" ฉันสามารถเปลี่ยนได้ครั้งเดียว

— Nick Ginanto

ลองเพิ่มวงเล็บเช่น $ my_width: ((4/12)%);

— ศรี

อ๊ะ .. ขออภัยฉันไม่มีโอกาสได้ตรวจสอบและลองทำอีกครั้ง .. {$ my_width: (4/12)%;}

— ศรี

คำตอบ:

211

คุณได้ลองใช้ฟังก์ชันเปอร์เซ็นต์แล้วหรือยัง?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— โทมัส
แหล่งที่มา

มีฟังก์ชันที่คล้ายกันสำหรับ px และ em หรือไม่?

— Nick Ginanto

ไม่แน่ใจ แต่ในส่วนแหล่งที่มาของเอกสารคุณสามารถดูตรรกะพื้นฐาน: Sass :: Script :: Number.new (value.value * 100, ['%']) ดังนั้นฉันจะคิดว่าถ้าไม่มี คุณสามารถทำสิ่งนี้ได้โดยตรงหรือสร้างฟังก์ชัน wrapper ด้วยตัวเอง

— Tomas

@NickGinanto สำหรับ px คุณสามารถเพิ่ม+pxที่ท้ายบรรทัดเช่นwidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat ไม่คุณไม่ควรทำอย่างนั้นไม่ว่าในกรณีใด ๆ การเพิ่มหน่วยควรทำผ่านการคูณ (เช่น$foo + $bar * 1px) การต่อหน่วยในแบบนั้นจะทำให้คุณได้สตริงเท่านั้น

— cimmanon

เมื่อเร็ว ๆ นี้ @cimmanon เปลี่ยนแปลงไปหรือไม่ ฉันแน่ใจว่าไม่ใช่อย่างนั้นเมื่อฉันโพสต์ความคิดเห็น

— แพะไม่พอใจ

อีกวิธีหนึ่ง:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass จะแสดงค่าเป็น%

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

โปรดทราบว่าฉันต้องใช้ 100/6 * 1% เพื่อให้ได้ผลสำหรับฉันหรืออื่น ๆ ฉันได้รับ 1666.67%

— sp00n

ฉันจะหาเอกสารได้ที่ไหนว่า * 100% ทำอะไรได้จริง?

— Ini

ฉันสามารถทำให้มันทำงานได้ด้วยวิธีนี้:

div{
   width: (4/12)* 1%;
   }

ด้วยวิธีนี้คุณไม่จำเป็นต้องใช้ฟังก์ชันพิเศษใด ๆ

— Enrique Cuchetti
แหล่งที่มา