できるかなー？と思ったらできたので書いておく。
なにがしたかったかというと、各要素(ここではinputタグとtextarea)で使えるクラスをサクッとくっつけたかった。
普通にやろうとすると、たぶんこうなる。

input[type=text].error, input[type=email].error, input[type=password].error, textarea.error {
  background-color: #FFE1E3;
}
input[type=text].size-small, input[type=email].size-small, input[type=password].size-small, textarea.size-small {
  width: 150px;
}
input[type=text].size-medium, input[type=email].size-medium, input[type=password].size-medium, textarea.size-medium {
  width: 300px;
}
input[type=text].size-large, input[type=email].size-large, input[type=password].size-large, textarea.size-large {
  width: 450px;
}

これって横に長くて見辛いし、変更があったら全部またやっていかないといけない。面倒過ぎで笑えない。どの要素でどのクラスが使えるかを把握するのもこれだとちょっとわかりにくい気がします。

しかし、Sassを使えばこんなふうに書ける。

%inputArea {
  &.error {
    background-color: #FFE1E3;
  }
  &.size-small {
    width: 150px;
  }
  &.size-medium {
    width: 300px;
  }
  &.size-large {
    width: 450px;
  }
}
input[type=text] {
  @extend %inputArea;
}
input[type=email] {
  @extend input[type=text];
}
input[type=password] {
  @extend input[type=text];
}
textarea {
  @extend %inputArea;
}

おー、エレガント。ビューティフル。見やすいですねぇ！
フォームの入力要素で使えるクラスを%inputAreaにまとめてしまえば楽チンじゃないかな？と思ったのでした。

Tweet