让Sass解析浏览器黑客攻击

Question

让Sass（3.4.15）解析浏览器CSS属性黑客的最佳方法是什么 - 不使用指南针或任何其他库。例如。 '_property'或'*property'。

.hack-test{
    display: inline-block;
    display: *inline;
}

Invalid CSS after " display: ": expected expression (e.g. 1px, bold), was "*inline;"

我在Stack Overflow周围搜索但找不到任何可以明确回答此问题的内容。

Answer 1

您可以使用sass字符串，以便将无效的css作为字符串注入。 我把它全部放在mixin中重复使用：

$star: "*inline";

@mixin hack-test($selector) {
  #{$selector} {
    display: inline-block;
    display: #{$star};
  }
}

所以，如果你尝试使用mixin：

@include hack-test('.foo');

css输出将符合要求：

.foo {
  display: inline-block;
  display: *inline;
}

您可以查看我在Github上发布的一些SCSS浏览器黑客here