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返回函数中的每个变量使用插值。

演示

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

代码包未编译scss函数且没有错误

1 个答案: