codekit not compiling scss function and no error

Question

I want to compile this piece of scss/sass code:

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

What it does is not important, but the output in my css is:

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

The name of the function appears in the css code... Why are the functions 'calc-width()' and 'calc-left' not executed? I use codekit as compiler.

Answer 1

• Define your functions before to use them.
• Use interpolation for each variable inside the calc return function.

Demo

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