li.user
と li.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
に対して一行で完了させることができます。