Sass คำนวณเปอร์เซ็นต์ลบพิกเซล

133

ฉันต้องการที่จะทำสิ่งต่อไปนี้:

height: 25% - 5px;

เห็นได้ชัดว่าเมื่อฉันทำเช่นนั้นฉันได้รับข้อผิดพลาด:

Incompatible units: 'px' and '%'.

sass

— ไมค์ Fielden
แหล่งที่มา

ฉันได้รับInvalid property valueข้อผิดพลาด ในทุกเบราว์เซอร์รวมถึง Canary build ของ Chrome

— Mike Fielden

ถ้ามีฟังก์ชั่น Sass ที่ทำให้ฉันได้สิ่งที่ฉันต้องการนั่นเจ๋งฉันแค่เล่นกับcalc...

— Mike Fielden

ใช่ :) อย่างที่ฉันบอกว่าฉันไม่สนใจว่ามันจะเสร็จได้อย่างไรcalcคือฉันไปก่อนและมันก็ไม่ได้ผล ดูเหมือนว่าจะcalcไม่ทำงานในเบราว์เซอร์ใด ๆ ของฉันดังนั้นการใช้งาน sass จะดีที่สุดที่ฉันจะเดา

— Mike Fielden

1

Sass ไม่สามารถทำหน้าที่เป็น polyfill สำหรับ calc () ไม่ทราบวิธีแปลง 25% เป็น px เพื่อให้สามารถคำนวณและสร้าง CSS ได้ อาจมีทางเลือกอื่นเช่นการใช้ตระกูลโต๊ะแสดงผลการเปลี่ยนขนาดกล่องหรือการใช้ระยะขอบลบ ( jsfiddle.net/5JZGt ) ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ

— cimmanon

240

Sass ไม่สามารถคำนวณค่าที่ไม่สามารถแปลงจากหน่วยหนึ่งไปเป็นหน่วยถัดไปได้ Sass ไม่มีทางรู้ได้ว่า "100%" กว้างแค่ไหนในแง่ของพิกเซลหรือหน่วยอื่น ๆ มีเพียงเบราว์เซอร์เท่านั้นที่รู้

คุณจำเป็นต้องใช้calc()แทน ตรวจสอบความเข้ากันได้ของเบราว์เซอร์บน Can I use ...

.foo {
    height: calc(25% - 5px);
}

หากค่าของคุณอยู่ในตัวแปรคุณอาจต้องใช้การแก้ไขเพื่อเปลี่ยนให้เป็นสตริง (มิฉะนั้น Sass จะพยายามคำนวณเลขคณิต):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

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

5

ฉันจะบอกว่า calc () ใช้ไม่ได้เลยในเบราว์เซอร์ส่วนใหญ่ แพลตฟอร์มมือถือมีความสำคัญพอ ๆ กับเดสก์ท็อป

— dalgard

3

ไม่มีข้อโต้แย้ง แต่นับเบราว์เซอร์! การสนับสนุนที่มากขึ้นกว่าการคำนวณ () และจะรองรับมากขึ้นในอนาคตอันใกล้

— chrisgonzalez

5

ผมมีปัญหาเกี่ยวกับความกว้างใช้ตัวแปรภายในฟังก์ชั่นคำนวณ แต่พบได้ที่นี่: stackoverflow.com/questions/13542164/...calc(25% - #{$var})ที่ฉันสามารถอ้างอิงตัวแปรเช่นนี้:

— mlunoe

หากต้องการติดตามคำสั่งของ @dalgard ในแง่ของเบราว์เซอร์ที่มีอยู่ซึ่งเปิดตัวแล้ว Calc ไม่ทำงานเกินกว่าที่ใช้งานได้โปรดดู: caniuse.com/#search=calc

— imjared

3

คุณสามารถใช้ตัวเลือกถอยกลับได้ตลอดเวลาโดยเพิ่มwidth: 22%ที่ด้านบนwidthด้วยcalc

— Hengjie

23

มีcalcฟังก์ชันทั้งใน SCSS [เวลาคอมไพล์] และ CSS [รันไทม์] คุณมีแนวโน้มที่จะเรียกอดีตแทนที่จะเป็นอย่างหลัง

ด้วยเหตุผลที่ชัดเจนว่าหน่วยผสมจะไม่ทำงานในเวลาคอมไพล์ แต่จะทำงานในขณะรันไทม์

คุณสามารถบังคับตัวหลังได้โดยใช้unquoteฟังก์ชัน SCSS

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

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

14

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

— Edwin Fernando Marroquin Busto
แหล่งที่มา

2

ขอขอบคุณที่โพสต์คำตอบสำหรับคำถามนี้! คำตอบแบบโค้ดเท่านั้นไม่ได้รับการสนับสนุนใน Stack Overflow เนื่องจากการถ่ายโอนข้อมูลรหัสที่ไม่มีบริบทไม่ได้อธิบายว่าวิธีการแก้ปัญหาทำงานอย่างไรหรือทำไมจึงทำให้ผู้โพสต์ต้นฉบับ (หรือผู้อ่านในอนาคต) เข้าใจตรรกะเบื้องหลังได้ยาก โปรดแก้ไขคำถามของคุณและใส่คำอธิบายรหัสของคุณเพื่อให้ผู้อื่นได้รับประโยชน์จากคำตอบของคุณ ขอบคุณ!

— Maximillian Laumeister

ที่ช่วยฉัน ความกว้าง: unquote ("calc (100% - # {$ leftnav-width})");

— httpete

5

หากคุณทราบความกว้างของคอนเทนเนอร์คุณสามารถทำได้ดังนี้:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

ฉันทราบว่าในหลาย ๆ กรณี # คอนเทนเนอร์อาจมีความกว้างสัมพัทธ์ จากนั้นสิ่งนี้จะไม่ได้ผล

— ออกแบบโดย Adrian
แหล่งที่มา

2

ขออภัยสำหรับการฟื้นฟูเธรดเก่า - การยืดของเข็มทิศด้วย: after pseudo-selector อาจเหมาะกับวัตถุประสงค์ของคุณ - เช่น หากคุณต้องการให้ div เติมความกว้างจากซ้ายถึง (50% + 10px) ของหน้าจอคุณสามารถใช้ (ในไวยากรณ์ที่เยื้อง SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

องค์ประกอบ: after เติม 50% ทางด้านขวาของ. ตัวอย่าง (ปล่อยให้ 50% ใช้ได้สำหรับความกว้างของ. ตัวอย่าง) จากนั้น. ตัวอย่างจะยืดออกไปตามความกว้างนั้นบวก 10px

— ไบรซ์กิลโฮม
แหล่งที่มา

1

มีน้อยกว่านี้หรือ sass ผสมสำหรับที่แห่งนี้? Calc ดูเหมือนจะทำงานได้ไม่ดีเลย

— v3nt

0

เพียงแค่เพิ่มค่าเปอร์เซ็นต์ลงในตัวแปรและใช้#{$variable} ตัวอย่างเช่น

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

— Aftab Ahmed
แหล่งที่มา