Каков правильный способ записи функций Sass?

Question

Я работаю над Angular 2 с помощью Webpack. Я создал свой SCSS-файл в своем компоненте и помещал внутри него код ниже, но SCSS-миксы не работают, а другие CSS все еще работают правильно, также если я создаю переменные, они также работают исправно, и при создании кода не появляется ошибка на angular-cli. Вот мой код:

@mixin widthbypercentage($from-number, $to-number) { 
    /* Firefox */ 
    width: -moz-calc($from-number - $to-number); 
    /* WebKit */ 
    width: -webkit-calc($from-number - $to-number); 
    /* Opera */ 
    width: -o-calc($from-number - $to-number); 
    /* Standard */ 
    width: calc($from-number - $to-number); 
} 

@mixin heightbypercentage($from-number, $to-number) { 
    /* Firefox */ 
    height: -moz-calc($from-number - $to-number); 
    /* WebKit */ 
    height: -webkit-calc($from-number - $to-number); 
    /* Opera */ 
    height: -o-calc($from-number - $to-number); 
    /* Standard */ 
    height: calc($from-number - $to-number); 
} 

.ah-categories-wrapper { 
    position: relative; 
    @include widthbypercentage(100%, 40%); 
    @include heightbypercentage(100%, 130px); 
    margin: 0 auto; 
    border: 1px solid darkgray; 
} 

Я также посетить this ссылку и копировать и запускать упомянутые функции все из них работают отлично. Я думал, что в моем коде может быть что-то не так.

Answer 1

При использовании переменных для CSS calc(), поместите их в этом #{ }:

@mixin widthbypercentage($from-number, $to-number) { 
    /* Firefox */ 
    width: -moz-calc(#{$from-number} - #{$to-number}); 
    /* WebKit */ 
    width: -webkit-calc(#{$from-number} - #{$to-number}); 
    /* Opera */ 
    width: -o-calc(#{$from-number} - #{$to-number}); 
    /* Standard */ 
    width: calc(#{$from-number} - #{$to-number}); 
} 

@mixin heightbypercentage($from-number, $to-number) { 
    /* Firefox */ 
    height: -moz-calc(#{$from-number} - #{$to-number}); 
    /* WebKit */ 
    height: -webkit-calc(#{$from-number} - #{$to-number}); 
    /* Opera */ 
    height: -o-calc(#{$from-number} - #{$to-number}); 
    /* Standard */ 
    height: calc(#{$from-number} - #{$to-number}); 
} 

.ah-categories-wrapper { 
    position: relative; 
    @include widthbypercentage(100%, 40%); 
    @include heightbypercentage(100%, 130px); 
    margin: 0 auto; 
    border: 1px solid darkgray; 
} 

---

CSS3 calc() теперь fully supported, поэтому нет необходимости в браузерных префиксов.