@each
该
,表达式返回一个列表。依次为列表中的每个元素评估该块,并将其分配给给定的变量名称。
scss 语句 | css 语句 |
---|---|
$sizes: 40px, 50px, 80px; | .icon-40px { font-size: 40px; height: 40px; width: 40px; } .icon-50px { font-size: 50px; height: 50px; width: 50px; } .icon-80px { font-size: 80px; height: 80px; width: 80px; } |
使用地图
您还可以通过编写
,来迭代映射中的每个键/值对。键被分配给第一个变量名,元素值被分配给第二个。
scss 语句 | css 语句 |
---|---|
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); | @charset "UTF-8"; .icon-eye:before { display: inline-block; font-family: "Icon Font"; content: ""; } .icon-start:before { display: inline-block; font-family: "Icon Font"; content: ""; } .icon-stop:before { display: inline-block; font-family: "Icon Font"; content: ""; } |
解构
如果您有一个列表,您可以通过编写
,来自动将变量分配给内部列表中的每个值。这称为解构,因为变量匹配内部列表的结构。每个变量名都分配给列表中相应位置的值,如果列表中没有足够的值,则为null
。
scss 语句 | css 语句 |
---|---|
$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px; | @charset "UTF-8"; .icon-eye:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 12px; } .icon-start:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 16px; } .icon-stop:before { display: inline-block; font-family: "Icon Font"; content: ""; font-size: 10px; } |
因为@each 支持解构并且地图算作列表列表,所以@each 地图支持不需要特别支持地图就可以工作。