Sass negative variable value?

后端 未结 3 441
陌清茗
陌清茗 2020-11-29 02:59

I have a couple of scss selectors where I use the same amount positive and negative, as in:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;
相关标签:
3条回答
  • 2020-11-29 03:35

    Try it like this

    margin: 0 (-$pad) 20px (-$pad);
    
    0 讨论(0)
  • 2020-11-29 03:37

    I'm adding my two-penneth after considering the two previous answers, but then reading this (emphasis mine):

    You should especially avoid using interpolation like #{$number}px. This doesn’t actually create a number! It creates an unquoted string that looks like a number, but won’t work with any number operations or functions. Try to make your math unit-clean so that $number already has the unit px, or write $number * 1px.

    Source

    Therefore I believe the correct way would be as follows, which preserves the mathematical abilities of SASS/SCSS:

    $pad: 15px;
    padding: 0 $pad $pad;
    margin: 0 $pad*-1 20px $pad*-1;
    
    0 讨论(0)
  • 2020-11-29 03:51

    A more sane solution according to sass guidelines would be to interpolate variables like the following example:

    margin: 0 -#{$pad} 20px -#{$pad};
    

    An example: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

    0 讨论(0)
提交回复
热议问题