Stylus 中的变量赋值

【问题标题】：Variable Assignments in StylusStylus 中的变量赋值
【发布时间】：2015-02-27 21:19:10
【问题描述】：

我正在尝试将媒体查询的变量分配放在 global.styl 文件中。

如果它在同一个文件中，则以下工作：

tablet = "all and (max-width: " + 768px+ ")" //variable assignment @media tablet { text-align: left; padding: 122px; }

但是如果我尝试将变量赋值移动到 global.styl 文件中，它就不起作用了。

在弄清楚为什么流星和/或手写笔没有从另一个文件中读取全局变量后，我想避免返回并重构，因此非常感谢任何帮助。谢谢！

【问题讨论】：

标签： css meteor stylus

【解决方案1】：

Meteor 的手写笔包单独编译每个.styl 文件。如果要将样式表拆分为多个文件，则需要照常使用手写笔的@import 指令。使用扩展名 .import.styl 命名您导入的（全局）文件，Meteor 只会观察它的变化，而不会尝试自行编译。

// globals.import.styl
tablet = "all and (max-width: " + 768px+ ")"

// media-queries.import.styl
// ...
@media tablet {
  text-align: left;
  padding: 122px;
}
// ...

// style.styl
@import 'globals.import'
@import 'media-queries.import'

顺便说一句，我强烈建议您查看Rupture，它与cryptoquick:stylus-multimeteor 包一起打包。

【讨论】：