Question

我有以下HTML：

  <div class="row">
    <div class="col-1-of-3">Col 1 of 3</div>
    <div class="col-2-of-3">Col 2 of 3</div>
  </div>

和以下scss：

$gutter-horizontal: 6rem;

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin colWidth($dim, $sub: 1) {
  width: calc(
    #{$sub} * (100% - (#{$dim}-1) * #{$gutter-horizontal}) / #{$dim} +
      (#{$sub}-1) * #{$gutter-horizontal}
  );
}
.row {
  max-width: $grid-width;
  background: #eee;
  margin: 0 auto;

  &:not(:last-child) {
    margin-bottom: $gutter-vertical;
  }

  @include clearfix;

  [class^="col-"] {
    float: left;
    background: red;
    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }

  .col-1-of-3 {
    width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
  }

  .col-2-of-3 {
    @include colWidth(3, 2);
  }

我正在尝试概括：

.col-2-of-3 {
  width: calc(
    2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}
  );
}

渲染后，检查会告诉我我的mixin产量：

width: calc( 2 * (100% - (3-1) * 6rem) / 3 + (2-1) * 6rem);

它简化为：

width: calc( 2 * (100% - 2 * 6rem) / 3 + 6rem);

直接方法检查到：

width: calc( 2 * ((100% - 2 * 6rem) / 3) + 6rem);

在操作顺序上相同，但根据检查的最终宽度不同。

对我来说分别是614和594。

为什么有区别？

谢谢。

Answer 1

我认为这里的问题是space

如果您的mixin给您以下输出：

width: calc( 2 * (100% - (3-1) * 6rem) / 3 + (2-1) * 6rem);

浏览器返回错误，因为您必须在每个运算符之间放置空格：

width: calc( 2 * (100% - (3 - 1) * 6rem) / 3 + (2 - 1) * 6rem);

我创建了一个示例。在第一种情况下，我使用了混合结果和直接方法：

.col-1-of-3 {
  width: calc(2 * (100% - (3-1) * 6rem) / 3 + (2-1) * 6rem);
  background-color:#ff0000;
}

.col-2-of-3 {
  width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem);
  background-color:#00ff00;
}

<div class="row">
    <div class="col-1-of-3">Col 1 of 3</div>
    <div class="col-2-of-3">Col 2 of 3</div>
</div>

宽度是不同的，因为在混合结果中，浏览器无法理解您的(3-1)和(2-1)操作。但是，如果我们在运算符之间放置空格，则mixin结果和直接方法会得到相同的结果：

.col-1-of-3 {
  width: calc(2 * (100% - (3 - 1) * 6rem) / 3 + (2 - 1) * 6rem);
  background-color:#ff0000;
}

.col-2-of-3 {
  width: calc(2 * ((100% - 2 * 6rem) / 3) + 6rem);
  background-color:#00ff00;
}

<div class="row">
    <div class="col-1-of-3">Col 1 of 3</div>
    <div class="col-2-of-3">Col 2 of 3</div>
</div>

我认为这是造成这种差异的原因。

Sass mixin输出CSS，其计算结果与手工简化的结果不同

1 个答案: