响应Sass变量

Question

所以我创建了一个将px＆＃s转换为em的功能。默认设置是使用变量$base-font-size。那么，如果我想根据浏览器宽度更改该变量，最佳做法是什么？那可能吗？如果我更改变量将调用该函数的所有位置重新计算？

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

或者我是否必须在每个调用此功能的地方重新调用它？感谢

Answer 1

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

举个例子：

$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;
  }
}

显然，可以根据您的需求量身定制。