Sass:extendでellipsisを共用

goto_jp 236views 更新:2014年6月26日

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を使うことで宣言元のセレクタにクラス名を含めることができるため記述量が減ります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません