csdnceshi54
hurriedly%
2013-07-31 22:30
采纳率: 0%
浏览 1.0k

Css calc ()函数中的 Sass 变量

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:

$body_padding: 50px

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

If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output:

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

How can I get Sass to recognize that it needs to replace the variable within the calc function?

转载于:https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • weixin_41568196
    撒拉嘿哟木头 2013-11-27 07:40
    已采纳

    Interpolate:

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

    For this case, border-box would also suffice:

    body
        box-sizing: border-box
        height: 100%
        padding-top: $body_padding
    
    点赞 评论
  • csdnceshi51
    旧行李 2017-04-21 08:01

    Try this:

    @mixin heightBox($body_padding){
       height: calc(100% - $body_padding);
    }
    
    body{
       @include heightBox(100% - 25%);
       box-sizing: border-box
       padding:10px;
    }
    
    点赞 评论
  • csdnceshi59
    ℙℕℤℝ 2018-09-17 09:22

    To use $variables inside your calc() of the height property :

    Html

    <div></div>
    

    Scss

    $a: 4em;
    
    div {
      height: calc(#{$a} + 7px);
      background: #e53b2c;
    }
    
    点赞 评论
  • csdnceshi52
    妄徒之命 2018-10-21 06:50

    Here is a really simple solution using SASS/SCSS and a math formula style:

    /* 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; }
    

    To conclude, I strongly suggest you to understand transform-origin, rotate() and skew():

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

    点赞 评论

相关推荐