sassの入力タイプを省略することはできますか？ SASSにいくつかのコードを足す

Question

私はこのような状況を発見した：

input[type="text"]:focus { 
    border: 3px solid #AFDDFB; 
    transition: 100ms linear; 
} 

は今、私はそうのような別の入力タイプをカバーする必要があります。

input[type="text"]:focus, input[type="password"]:focus, 
input[type="email"]:focus { 
    border: 3px solid #AFDDFB; 
    transition: 100ms linear; 
} 

私はスピードアップ私の文章を、のようなもののためにいくつかのトリックが必要です。

を

input[text, password, email]:focus { 
//Dadada 
} 

sassを使用する方法はありますか？

Answer 1

定義済みのプロパティ
私は個人的には息切れの後に行くが、それはそれに合うかどうかは、全体のコードに依存します。あなた次第。

@mixin focus($types) { 
    @each $type in $types { 
     &[type=#{$type}]:focus { 
      border:3px solid #AFDDFB; 
      transition:100ms linear; 
     } 
    } 
} 
input { 
    @include focus(text email password); 
} 

Demo Properties

@content。
Andy Fのコメントについて - @content;でより柔軟な構成をしたい場合はここをクリックしてください。スタイルが異なる複数のフォームがある場合に便利です。あなたのmixinが自分の設定ファイルにあるのか、上のコードで同じファイルにあるのかはわかりません。 mixins/functionsを分離している場合に備えて、configを開くのではなく、同じファイル内のコードを変更する方が簡単です。

@mixin focus($types) { 
    @each $type in $types { 
     &[type=#{$type}]:focus { 
      @content; 
     } 
    } 
} 
input { 
    @include focus(text email password) { 
     border:3px solid #AFDDFB; 
     transition:100ms linear; 
    } 
} 

Demo @content;

あなたはurl、telまたはnumberのようにそれにさらに多くの入力タイプを追加することができます。便利な場合はsubmitボタンもあります。