Вывод Sass mixin css с выходом calc, отличным от упрощенного вручную

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}
  );
}

Когда отображается,inspect сообщает мне, что мой 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

Если ваш миксин выдаст вам такой вывод:

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

Браузеры возвращают вам ошибку, потому что вы должны ставить пробел между каждымоператор:

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

Я создал пример.В первом случае я использовал ваш результат 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>

Ширина отличается, потому что с вашим результатом mixin браузеры не могут понять ваши операции (3-1) & (2-1).Но если мы поместим пробелы между операторами, метод mixin result & direct даст нам тот же результат:

.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>

Я думаю, что в этом причина такой разницы.