SASS / SCSS对象键值循环\[重复\]

css CSS

Itachi蛋蛋

2020-03-24

看一下这个例子:

@include font-face('Entypo', font-files('entypo.woff'));

.icon {
  display: inline;
  font: 400 40px/40px Entypo;
}

.icon-star {
  @extend .icon;

  &:after {
    content: "\2605";
  }
}

.icon-lightning {
  @extend .icon;

  &:after {
    content: "\26A1";
  }
}

我想使事情变得尽可能干燥,所以我想知道以下情况是否可行,以及如何做到?

@include font-face('Entypo', font-files('entypo.woff'));

.icon {
  display: inline;
  font: 400 40px/40px Entypo;
}

$icons {
  $star: "\2605";
  $lightning: "\26A1";
}

@each $icon in $icons {
  $key = $icon{key}; // ???
  $value = $icon{value}; // ???

  .icon-#{$key} {
    @extend .icon;

    &:after {
      content: $value;
    }
  }
}

第3449篇《SASS / SCSS对象键值循环\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
飞云L 2020.03.24

Sass当前不支持映射。您现在必须使用列表列表。

$icons: star "\2605", lightning "\26A1";

@each $icon in $icons {
  $key: nth($icon, 1);
  $value: nth($icon, 2);

  .icon-#{$key} {
    @extend .icon;

    &:after {
      content: $value;
    }
  }
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android