Sass関数を書く正しい方法は何ですか？

Question

私はWebpackを使用してAngular 2に取り組んでいます。自分のコンポーネントにSCSSファイルを作成し、その中に以下のコードを入れましたが、SCSSミックスインは動作していません。他のCSSはまだ正常に動作しています。また、変数を作成しても正常に動作し、コードを構築している間にエラーは表示されません。

@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、ブラウザのプレフィックスのため、不要です。