Sass Variable ในฟังก์ชั่น CSS calc ()


1345

ฉันพยายามใช้calc()ฟังก์ชันในสไตล์ชีต Sass แต่ฉันมีปัญหา นี่คือรหัสของฉัน:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

ถ้าฉันใช้ตัวอักษร50pxแทนที่จะเป็นbody_paddingตัวแปรฉันจะได้สิ่งที่ต้องการ อย่างไรก็ตามเมื่อฉันเปลี่ยนเป็นตัวแปรนี่คือผลลัพธ์:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

ฉันจะทำให้ Sass รับรู้ได้อย่างไรว่ามันจำเป็นต้องเปลี่ยนตัวแปรภายในcalcฟังก์ชั่น?


10
อาจเป็นไปได้ซ้ำซ้อนของUsa a Variable ใน Mixin
cimmanon

19
@ user3705055 คุณจำเป็นต้องคำนวณเนื่องจาก Sass ไม่สามารถคำนวณได้ 100% - 50px เนื่องจากหน่วยแตกต่างกัน เบราว์เซอร์นี้สามารถคำนวณได้เฉพาะเมื่อเบราว์เซอร์รู้ว่าคอนเทนเนอร์มีขนาดใหญ่เพียงใดเพื่อแปลง 100% เป็น px ก่อนที่จะเพิ่มค่า นี่คือเหตุผลที่แท้จริงว่าทำไม calc มีอยู่จริง
Mog0

คำตอบ:


2543

สอดแทรก :

body
    height: calc(100% - #{$body_padding})

สำหรับกรณีนี้กล่องขอบจะพอเพียง:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

3
box-sizing: border-box;จะเป็นวิธีที่เหมาะที่สุดที่จะไปในความคิดของฉันแน่นอน โดยทั่วไปรูปแบบการปรับขนาดกล่องควรทำให้ t
Brandito

ขอบคุณมาก! ฉันกำลังจะไปเส้นทาง css กับcalc(100% - var(--body_padding))
Sylar

51

วิธีใช้$variablesภายในcalc()คุณสมบัติความสูง:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

11
สิ่งนี้เพิ่มไปยังคำตอบที่ยอมรับจากเกือบ 5 ปีที่แล้ว?
random_user_name

6
ด้วยเหตุผลบางอย่างฉันพบคำตอบที่ชัดเจนกว่านี้ ฉันไม่ได้ทำงาน scss จำนวนมากดังนั้นนี่จึงเป็น "เครื่องหนีบ" และฉันเข้าใจได้ง่ายขึ้น
2b77bee6-5445-4c77-b1eb-4df3e5

4
นี่เป็นคำตอบที่ชัดเจนกว่าคำตอบที่ยอมรับ 'Interpolate:' ไม่มีความหมายสำหรับฉัน
Jacques Mathieu

3
@JacquesMathieu sass-lang.com/documentation/interpolation - ถ้ามันไม่ได้มีความหมายอะไรกับคุณและมันเป็นคำตอบของการโหวตมากมายคุณอาจเข้าใจว่าเอะอะเป็นอย่างไร แค่สองเซ็นต์ของฉัน ...
A. Chiesa

1
@A Chiesa แน่นอนว่าจะกำหนดการแก้ไข อย่างไรก็ตาม OP และฉันไม่รู้จักการแก้ไขใน SASS มิฉะนั้นคำถามนี้จะไม่ถูกถาม ดังนั้นเพียงแค่ระบุคำที่ไม่เคยได้ยินมาก่อนโดยไม่มีคำจำกัดความหรือข้ออ้างใด ๆ ที่ไม่ได้ช่วยในการสร้างคำตอบรวมทั้งหมด ลิงค์นั้นมีประโยชน์อย่างแน่นอน คงจะดีที่ได้เห็นว่าในคำตอบที่ได้รับการยอมรับ
Jacques Mathieu

9

แม้ว่ามันจะไม่เกี่ยวข้องโดยตรง แต่ฉันพบว่ารหัส CALC จะไม่ทำงานหากคุณใส่ช่องว่างไม่ถูกต้อง

ดังนั้นสิ่งนี้ไม่ได้ผลสำหรับฉัน calc(#{$a}+7px)

แต่สิ่งนี้ใช้ได้ผล calc(#{$a} + 7px)

เอาฉันบางครั้งคิดออก


2

ฉันได้ลองแล้วฉันจะแก้ไขปัญหาของฉัน มันจะคำนวณจุดพักสื่อทั้งหมดโดยอัตโนมัติตามอัตราที่กำหนด (ขนาดพื้นฐาน / อัตราขนาด)


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

0

นี่คือทางออกที่ง่ายมากโดยใช้ SASS / SCSS และสไตล์สูตรคณิตศาสตร์:

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

เพื่อสรุปผมขอแนะนำให้คุณเข้าใจtransform-origin, rotate()และskew():

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/


-2

คุณสามารถใช้วาจาของคุณ #{your verbal}


3
ดูเหมือนว่าจะเป็นคำตอบที่แปลก ฉันถือว่าคุณหมายความว่าvariableแต่เมื่อ OP รู้ว่าตัวแปรคืออะไร (พวกเขาระบุ$body_paddingในรหัสของพวกเขา) คำตอบของคุณเพิ่มอะไร
Mike Poole

ฉันให้คำตอบ
Girraj

-6

ลองสิ่งนี้:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

3
ดีกว่าคำตอบที่ได้รับการยอมรับข้างต้นอย่างไร ดูเหมือนจะไม่ทำสิ่งเดียวกัน ... ?
จูลส์
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.