Question

我有一组我想用条件设置的变量。 Modernizr正在为我处理启用触摸的设备，并相应地向HTML标记添加.touch或.no-touch类。我有一个全局_settings.scss文件，里面装满了变量。其中一些用于布局和大小调整，我希望其中许多行为的不同取决于HTML标记上.touch和.no-touch类的存在。

我有什么选择？

Answer 1

不确定是否根据编译时间独立的条件设置变量（如正文中的范围类）是正确/最明智的方法 - 您已经知道某些变量需要不同的值，具体取决于作用域类体，并且这些值似乎不依赖于编译过程中已知的任何计算或条件。

我建议（以及在当前项目中做的）是对$my-var-touch和$my-var-no-touch使用不同的变量（或$my-var--no-touch - 是的，我是＆＃39 ; d甚至BEM-ify变量:)在你的_settings.scss;然后在实际选择器的范围内执行相关的声明/计算：

.touch {
  .my-class {
    width: $my-var-touch;
  }
}

.no-touch {
  .my-class {
    width: $my-var--no-touch;
  }
}

您的使用案例的正确答案当然取决于您实际上要做的事情，您的进口链如何设置，您在计算方面取得的进展等等，但我发现了我粗略地概述了一些方法来帮助我很多可维护性和可读的语义scss代码。

SASS条件变量？

1 个答案: