编写 Sass 函数的正确方法是啥？

Posted 2023-03-06

【中文标题】编写 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。这样你就不需要添加浏览器前缀了。

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