Sass：extendでellipsisを共用

Sassのextendを使って、サイト内でellipsisを使いまわしましょう。

Sass

.ellipsis {
  @include ellipsis;
}

.box1 {
  @extend .ellipsis;
  width: 100px;
}

.box2 {
  @extend .ellipsis;
  width: 500px;
}

まず「.ellipsis」という汎用クラスを定義し、その後それらをextendしています。

出力されるCSS

.ellipsis, .box1, .box2 {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.box1 {
  width: 100px;
}

.box2 {
  width: 500px;
}

Sass側の「@include ellipsis()」で、文言を省略表示させる記述セットを出力できますが、これをクラスごとに記述すると出力されるCSSのサイズがかさみます。

extendを使うことで宣言元のセレクタにクラス名を含めることができるため記述量が減ります。