Sass Variable في CSS calc() وظيفة




css3 css-calc (2)

أحاول استخدام الدالة calc() في ورقة أنماط Sass ، ولكن أواجه بعض المشكلات. ها هي الكود:

$body_padding: 50px

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

إذا استخدمت body_padding الحرفية بدلاً من متغير body_padding بي ، فأنا أحصل على ما أريده بالضبط. ومع ذلك ، عندما أتحول إلى المتغير ، هذا هو الناتج:

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

كيف يمكنني الحصول على Sass للتعرف على أنه يحتاج إلى استبدال المتغير داخل الدالة calc ؟


أقحم:

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

في هذه الحالة ، border-box أيضًا:

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

جرب هذا:

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

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






css-calc