SASS function does not work

Question

Good morning! I’m doing some tests with the Sass function it does not return me anything. I thought it was something I was typing wrong, or something like that. I copied the exact function of this site here and still the mistake continues. The function is here

        @function cp($target, $container) {
      @return calc-percent($target, $container);
    }
.my-module {
  width: calc-percent(650px, 1000px);
}

I’ve already cleaned browser cache, I’ve tried online tools... Anyway, what could I do ?

Answer 1

You didn’t call the function. I believe the correct one would be:

.my-module {
   width: cp(650px, 1000px);
}

Answer 2

The link you put in the question shows two functions. One is the Calc-Percent and the other is the cp which is only a minor name for the already declared function.

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

@function cp($target, $container) {
  @return calc-percent($target, $container);
}

.my-module {
  width: cp(650px, 1000px);
}

It works perfectly, possibly you have not declared the function Calc-Percent. Abstracting it gets even simpler the code.

@function cp($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
  width: cp(650px, 1000px);
}

Which results in the following CSS:

.my-module {
  width: 65%;
}