這個CSS插入到一個SASS列表中（類名被插入到一個屬性中）？

Question

如何將此重複性CSS轉換爲SASS列表，以便該類（實際上有50多個類，不僅僅是這裏的3個，用於所有SVG圖標）名稱自動以background-img：url結尾屬性？

.boy{ 
background: url(../svg/boy.svg); 
} 

.car{ 
background: url(../svg/car.svg); 
} 

.house{ 
background: url(../svg/house.svg); 
} 

Answer 1

$list: boy house car; 
@each $item in $list { 
    .#{$item}{ 
     background: url(../svg/#{$item}.svg); 
    } 
} 

Answer 2

你可以定義變量作爲SASS列表的一部分，然後遍歷他們這樣

$svg-list: "boy", "car", "house"; 

@each $i in $svg-list { 
    .#{$i} { 
    background: url(../svg/#{$i}.svg); 
    } 
} 

看到它在行動here。