кодекит не компилирует функцию scss и нет ошибки - PullRequest
Новая
       23

кодекит не компилирует функцию scss и нет ошибки

0 голосов
/ 21 сентября 2018

Я хочу скомпилировать этот фрагмент кода 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?Я использую кодекит в качестве компилятора.

1 Ответ

0 голосов
/ 21 сентября 2018
  • Определите свои функции, прежде чем использовать их.
  • Используйте интерполяцию для каждой переменной внутри функции возврата 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);
      }
    }
  }
}

Вы можете увидеть вывод здесь.

...