@extendでSCSSの記述をまとめる

Yukimi Sato 11views 更新:2015年4月28日

li.userli.room に同じ内容を適用したい時に、通常のcssなら

li.user,
li.room{

適用したい内容

}

と延々と書かないと行けないですが、@extend を使うと、

li{

        &.user{
          height: 38px;

          a{
            height: 38px;
            padding: 7px 16px 7px 38px;
            display: block;
            text-decoration: none;
          }
          &:hover span{
            text-decoration: none;
          }
          .name,
          .date{
            line-height: 25px;
            height: 25px;
          }
          .date{
            float: right;
          }
        }
        &.room{
          @extend .user; ←「.userの内容を読み込む」
        }
}

li.room に対して一行で完了させることができます。

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

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

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