什么是编写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函数的正确方法？

回答

相关问题