Question

SCSS：

$thick : 3px;
$pad : 0.5em;
$extra : calc(#{$pad} * 1.2);
$color : #8DC73F;

.footer__links {
  a {
    color: #333;
    padding: $pad $extra;
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;
    }
}

我想为不同的媒体查询更改$pad的值。

例如：

mobile --> $pad : 0.3em, tablet --> $pad : 0.5em

Answer 1

我认为创建单独的变量会更好。例如：

$space-xs = 4px;
$space-s = 8px;
$space-m = 16px;
$space-l = 32px;
$space-xl = 64px;

我强烈建议您阅读这篇文章： https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

它给了我很多帮助。

Answer 2

You can create separate variable or you can override your $pad into media query as well.
Example :

$pad:3px;
@media (min-width:320px){

  $pad:10px;

  .footer__links {
  a {
      color: #333;
    padding: $pad $extra;
    display: inline-block;
    border: $thick solid transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.07em;

}
} 
This give 10px padding to .footer__links a in min screen width 320px

如何在多个媒体查询中更改sass中变量的值

2 个答案: