Pertanyaan Variabel Sass dalam fungsi CSS calc ()


Saya mencoba menggunakan calc() berfungsi dalam stylesheet Sass, tapi saya mengalami beberapa masalah. Ini kode saya:

$body_padding: 50px

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

Jika saya menggunakan literal 50px bukan saya body_padding variabel, saya mendapatkan apa yang saya inginkan. Namun, ketika saya beralih ke variabel, ini adalah output:

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

Bagaimana saya bisa mendapatkan Sass untuk mengenali bahwa itu perlu mengganti variabel dalam calc fungsi?


764
2017-07-31 22:30


asal


Jawaban:


Menambah:

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

Untuk kasus ini, kotak batas juga akan cukup:

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

1515
2017-11-27 07:40



Coba ini:

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

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

-4
2018-04-21 08:01