codekit 没有编译 scss 函数并且没有错误

Question

我要编译这段scss/sass代码：

@for $i from 1 through 5{
  @for $j from 0 through $i - 1{
    &.cat-#{$i}-#{$j}{
      width: calc-width($i);
      left: calc-left($i, $j);
    }
  }
}

@function calc-width($i) {
  @if($i == 1){
    @return 100% / $i;
  }
  @else{
    @return calc(100% / $i - 10px);
  }
}

@function calc-left($i, $j) {
  @if($j == 0){
    @return 0;
  }
  @else{
    @return calc(100% * $j / $i + ($j * 10px)/($i - 1));
  }
}

它做什么并不重要，但我的 css 中的输出是：

section.section-products .categories .category.cat-4-3 {
width: calc-width(4);
left: calc-left(4, 3);

函数名出现在css代码中... 为什么函数 'calc-width()' 和 'calc-left' 没有执行？我使用 codekit 作为编译器。

Answer 1

在使用之前定义您的函数。
对 calc return 函数内的每个变量使用插值法。

演示

@function calc-width($i) {
  @if($i == 1) {
    @return (100% / $i);
  } @else {
    @return (calc(100% / #{$i} - 10px));
  }
}

@function calc-left($i, $j) {
  @if($j == 0){
    @return 0;
  } @else {
    @return (calc(100% * #{$j} / #{$i} + (#{$j} * 10px)/(#{$i} - 1)));
  }
}

.category {
  @for $i from 1 through 5 { 
    @for $j from 0 through $i - 1 { 
      &.cat-#{$i}-#{$j} { 
        width: calc-width($i);
        left: calc-left($i, $j);
      }
    }
  }
}

You can see the output here.

codekit 没有编译 scss 函数并且没有错误

codekit not compiling scss function and no error

compilation

function

sass

codekit