-1

我以前从未使用过指南针。我一直在将 LESS 文件转换为 SCSS 并包括指南针。我有一个 grunt 设置,可以将它与我正在使用的其他一些任务一起编译。我之前有一个关于 SCSS Math 无法使用 Grunt-Contrib-Sass 工作的问题,该问题已得到解决。既然我正在使用 Compass 编译我的 SCSS,那么就没有像以前那样做数学了。这是正在输出的示例:

-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% / 50%;
border-radius: 50% / 50%;
display: inline-block;
margin-right: 10/10em;
padding-top: 5/10em;
width: 25/10em;
height: 19/10em;
border: 1px solid #ababab;
color: #ababab;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: 10/16em;

这是它正在编译的内容:

@include border-radius( 50%, 50% );
display: inline-block;
margin-right: #{10/10}em;
padding-top: #{5/10}em;
width: #{25/10}em;
height: #{19/10}em;
border: 1px solid $mediumgray;
color: $mediumgray;
content: counter(x-counter);
vertical-align: middle;
text-align: center;
font-size: #{10/16}em;

我没有看到任何看起来他们会处理这个问题的选项。有没有人解决过这个问题?

4

1 回答 1

0

我不确定您是否完全了解 SASS 中的插值(我也没有)。在此处查看文档:http: //sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

我这样做的方式如下(省略不相关的代码):

margin-right: 10/10 * 1em;
padding-top: 5/10 * 1em;
width: 25/10 * 1em;
height: 19/10 * 1em;
font-size: 10/16 * 1em;

这编译为

  margin-right: 1em;
  padding-top: 0.5em;
  width: 2.5em;
  height: 1.9em;
  font-size: 0.625em;
于 2013-09-05T03:48:54.560 回答