Question

我以前从没用过指南针。我已经将LESS文件转换为SCSS并包括指南针。我有一个咕噜咕噜的设置，将其与我正在使用的其他任务一起编译。我之前有一个关于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;

我没有看到任何看起来像他们会照顾这个的选项。有人有/解决了这个问题吗？

Answer 1

我不确定你是否完全理解SASS中的插值（我也不知道）。在这里查看文档：{{3}}

我这样做的方式如下（省略不相关的代码）：

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;

Grunt-Contrib-Compass不做数学

1 个答案: