Sass @each 属性选择器循环

Question

我在 @each 循环中输出属性选择器时遇到问题。CSS 输出呈现'{$type}'。我该如何正确地做到这一点？

萨斯

@each $type in text, email 
  input[type='{$type}']
    background-color: $white
    border: 2px solid $loblolly
    border-radius: 6px
    color: $black
    font-family: $gotham
    font-size: $h5
    height: 2.75rem
    padding: 0 .625rem 0 .3125rem
    text-indent: .3125rem
    transition: border-color .5s ease background-color .5s ease

CSS（输出）

input[type='{$type}'] {
  background-color: #fff;
  border: 2px solid #c4d0d6;
  border-radius: 6px;
  color: #242934;
  font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  height: 2.75rem;
  padding: 0 0.625rem 0 0.3125rem;
  text-indent: 0.3125rem;
  transition: border-color 0.5s ease background-color 0.5s ease;
}

input[type='{$type}'] {
  background-color: #fff;
  border: 2px solid #c4d0d6;
  border-radius: 6px;
  color: #242934;
  font-family: "Gotham A", "Gotham B", Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  height: 2.75rem;
  padding: 0 0.625rem 0 0.3125rem;
  text-indent: 0.3125rem;
  transition: border-color 0.5s ease background-color 0.5s ease;
}

Answer 1

您使用的$type变量是错误的。您需要替换{$type}为#{$type}：

@each $type in text, email 
  input[type='#{$type}']
    background-color: $white
    border: 2px solid $loblolly
    border-radius: 6px
    color: $black
    font-family: $gotham
    font-size: $h5
    height: 2.75rem
    padding: 0 .625rem 0 .3125rem
    text-indent: .3125rem
    transition: border-color .5s ease background-color .5s ease

您还可以生成Pete 提到的规则：

$white: #fff
$loblolly: green
$black: black
$gotham: 'sans-serif'
$h5: 16px

%input-styles 
  background-color: $white
  border: 2px solid $loblolly
  border-radius: 6px
  color: $black
  font-family: $gotham
  font-size: $h5
  height: 2.75rem
  padding: 0 .625rem 0 .3125rem
  text-indent: .3125rem
  transition: border-color .5s ease background-color .5s ease

@mixin input-types
  @each $type in text, email
    input[type='#{$type}'] 
      @extend %input-styles

@include input-types

这会生成以下输出：

input[type='text'], input[type='email'] {
    /** ... */
}