自定义CSS属性SCSS混入

问题描述：

@mixin genericSidesStyles ($sides, $style, $cssProperty) { 
    @if($sides == '') { 
    $cssProperty: $style; 
    } 
    @else { 
    @each $side in $sides { 
     @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right') { 
     $cssProperty-#{$side}: $style; 
     } 
    } 
    } 
}

这是使发型到CSS属性与喜欢的margin，padding，边框等自定义CSS属性SCSS混入

我打电话给我的mixin如下边的SCSS混入

@include genericSidesStyles('top', 20px, 'margin');

这里顶部是上边距，20像素的距离和保证金是cssProperty但我收到以下错误

预计：$ cssPr后“” operty-赋值语句

帮助我知道我错了，在这

我测试了你的mixin，它似乎没有通过'@if（$ side =='top'或$ side =='bottom'或$ side =='left '或$ side =='right'）'条件。删除'@ each'循环（不知道为什么它甚至需要），它应该工作正常。也改变你的语句为'＃{$ cssProperty} - ＃{$ side}：$ style' –

@NikhilNanjappa我相信循环允许多个$边，因此可以同时创建margin-top和margin-bottom的属性将这两个值作为$ sides的列表传递。 –

它现在应该开始工作，你已经编辑了你的答案，从'@ each'语句中删除'$ cssProperty' - 你所需要做的就是将'$ cssProperty - ＃{$ side}：$ style;'语句改为' ＃{$ cssProperty} - ＃{$ side}：$ style;' –

答

您需要插值$cssProperty变量（因此它成为#{$cssProperty}，就像你与$side变量来完成。所以你的最终代码应该是：

@mixin genericSidesStyles ($sides, $style, $cssProperty) { 
    @if($sides == '') { 
    #{$cssProperty}: $style; 
    } 
    @else { 
    @each $cssProperty, $side in $sides { 
     @if ($side == 'top' or $side == 'bottom' or $side == 'left' or $side == 'right') { 
     #{$cssProperty}-#{$side}: $style; 
     } 
    } 
    } 
}

谢谢埃德蒙，但没有必要在@each行cssProperty我张贴错误感谢您的帮助 –

@Nikhil它的工作 –

自定义CSS属性SCSS混入

相关推荐