响应Sass变量

所以我创建了一个函数来将px转换为em。默认设置是使用变量a

$base font size

。那么，如果我想根据浏览器宽度更改该变量，那么最好的做法是什么呢？可能吗？如果我更改变量，调用函数的所有位置都会重新计算吗

@function em($pixels, $context: $base-font-size) {
  @return ($pixels / $context) * 1em;
}

---

或者我必须在每个调用这个函数的地方重新调用它？谢谢

就我个人而言，我永远不会更改应用程序的基本字体大小，而是使用媒体查询在特定的设备大小上根据它设置值

例如：

$base-font-size: 14px;

@function em($pixels, $context: $base-font-size) {
  @return ($pixels / $context) * 1em;
}

* {
  font-size: em(12px);
  @media (min-width: 300px) { 
      font-size: em(16px);
  }
  @media (min-width: 640px) { 
      font-size: em(14px);
  }
  @media (min-width: 980px) { 
      font-size: em(12px);
  }
}

* {
  font-size: 0.85714286em;
}
@media (min-width: 300px) {
  * {
    font-size: 1.14285714em;
  }
}
@media (min-width: 640px) {
  * {
    font-size: 1em;
  }
}
@media (min-width: 980px) {
  * {
    font-size: 1.14285714em;
  }
}

将编译为如下内容：

$base-font-size: 14px;

@function em($pixels, $context: $base-font-size) {
  @return ($pixels / $context) * 1em;
}

* {
  font-size: em(12px);
  @media (min-width: 300px) { 
      font-size: em(16px);
  }
  @media (min-width: 640px) { 
      font-size: em(14px);
  }
  @media (min-width: 980px) { 
      font-size: em(12px);
  }
}

* {
  font-size: 0.85714286em;
}
@media (min-width: 300px) {
  * {
    font-size: 1.14285714em;
  }
}
@media (min-width: 640px) {
  * {
    font-size: 1em;
  }
}
@media (min-width: 980px) {
  * {
    font-size: 1.14285714em;
  }
}

---

显然，根据你的需要。

但是对于媒体查询来说，基本字体仍然是14px，对吗？是的，基本字体变量本身永远不会改变。你也可以考虑使用视口宽度和高度设置来响应，并根据视口宽度改变字体大小。