自定義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-賦值語句

幫助我知道我錯了，在這

來源

2016-11-30 Saiyam Gambhir

我測試了你的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; 
     } 
    } 
    } 
}

來源

2016-11-30 12:10:24

謝謝埃德蒙，但沒有必要在@each行cssProperty我張貼錯誤感謝您的幫助 –

@Nikhil它的工作 –

自定義CSS屬性SCSS混入

回答

相關問題