類僞混入一個變量

我要讓下面的代碼工作：類僞混入一個變量

@mixin wrapper-bg($make-id) { 

} 
.wrapper-bg:before { 
    ... 
    background-image: url('/images/makes/{$make-id}.png'); 
    ... 
}

什麼我的最好的計劃嗎？

編輯：其實我可能做錯了。我想要的是每種產品的風格，唯一改變的就是圖像。這個CSS是由gulp編譯的，所以不能注入任何php變量。

來源

2017-02-24 khany

我明白了，你正在使用SASS :)如果是這樣，你可以做這樣的：基於您的評論我假設你正在使用的Sass這裏工作

@mixin wrapper-bg($image-name) { 
&::before { 
    background-image: url(/images/makes/#{$image-name}.png); 
} 
} 
.wrapper-bg { 
    @include wrapper-bg(image-name); 
}

來源

2017-02-24 13:25:28 Sniffer

非常好，基於你的回答我做了以下（因爲我需要循環它）：\ @mixin wrapper-bg（$ image-id）{＆:: before {background -image：url（/ images/makes /＃{$ image-id} .png）; }} @for $ i從1到50 {.wrapper-bg [data-make-id =「＃{$ i}」] {\ @include wrapper-bg（$ i）; }}。作品一種享受。 – khany

，所以我拿出以下內容。您可以使用一個mixin，採用可變（在這種情況下ID），這將返回元素上:before{}標籤，你把它應用到：

@mixin wrapper-bg ($id) { 
    &:before { 
     background-image: url("/images/makes/#{$id}.png"); 
    } 
} 

.wrapper-bg { 
    @include wrapper-bg("test"); 
}

這將導致：

.wrapper-bg:before { 
    background-image: url("/images/makes/test.png"); 
}

你可以玩這裏的代碼：http://codepen.io/offinga/pen/aJbeJM

來源

2017-02-24 13:47:52 Thomas

類僞混入一個變量

回答

相關問題