SASSの対象となる子クラスと要素は？

Question

私はフォームを持っている：

<form class="my-form"> 
    <input type="text" class="my-form__input"> 

マイSASSが現在のようなものに設定されています

.my-form { 
    // Some styles 

    &__input { 
    //Some styles 
    } 

    &__button { 
    //Some styles 
    } 
} 

をしかし、私はCSSで、たとえばテキストタイプであり、私のクラスを持っている入力を、ターゲットにします：

input[type=text].my-form__input

上記の私のSASS構造を維持しながら、上記のCSS出力を取得する方法はありますか？

Answer 1

.my-form { 
    // Some styles 

    &__input { 
    //Some styles 

    &[type="text"] { // generates .my-form__input[type="text"] 
     border: 2px solid red; 
    } 
    } 

    &__button { 
    //Some styles 
    } 
}