编写 Sass 函数的正确方法是什么？答案

【问题标题】：What is the right way to write Sass functions?编写 Sass 函数的正确方法是什么？
【发布时间】：2017-04-20 05:43:28
【问题描述】：

我正在使用 Webpack 开发 Angular 2。我在我的组件中创建了我的 SCSS 文件并将下面的代码放入其中，但 SCSS mixins 无法正常工作，其他 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 链接并复制并运行提到的功能，所有这些功能都运行良好。我认为我的代码可能有问题。

【问题讨论】：

可能值得看看这个 github 问题：github.com/angular/angular-cli/issues/678
其他 sass 变量正在工作......只有在 mixins 上面不起作用。
这里根本不使用 Sass 函数，而是使用 autoprefixer。这样你就不需要添加浏览器前缀了。

标签： css angularjs sass webpack angular-cli

【解决方案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，因此不需要浏览器前缀。

【讨论】：