什麼是編寫Sass函數的正確方法？

我正在使用Webpack開發Angular 2。我在我的組件中創建了我的SCSS文件，並在其中添加了以下代碼，但SCSS mixins無法正常工作，其他CSS仍然正常工作，如果我創建了變量，它們也可以正常工作，並且在構建我的代碼時不會顯示angular-cli錯誤。這裏是我的代碼：什麼是編寫Sass函數的正確方法？

@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鏈接並複製並運行上述功能全部被正常使用。我認爲我的代碼中可能有問題。

來源

2016-12-05 Ahmer Ali Ahsan

可能值得看看這個github問題：https：//github.com/angular/angular-cli/issues/678 –

其他sass變量正在工作......只有上面的mixins不工作。 –

這裏不是使用Sass函數，而是使用autoprefixer。這樣你根本不需要添加瀏覽器前綴。 – zzzzBov

當使用變量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，因此無需瀏覽器的前綴。

來源

2016-12-05 18:46:48 Nhan

什麼是編寫Sass函數的正確方法？

回答

相關問題