Question

我正在使用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链接并复制并运行提到的功能，所有这些功能都完美无缺。我以为我的代码可能有问题。

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，因此无需浏览器前缀。

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

1 个答案: