Sass @each循环用于属性选择器

Question

I'm having trouble output attribute selectors in a @each loop. The CSS output renders '{$type}' . How would I do this correctly?

SASS

@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 (OUTPUT)

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

You are using the $type variable wrong. You need to replace {$type} with #{$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

---

You can also generate the rules as Pete mentioned :

$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

This generates the following output:

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