LESSでは様々な使い方があります。
階層的な表現
header { font-size: 18px; a{ color: red; &:hover { color: green; } } } .button { &-ok { color: green; } &-ng { color: red; } }
ミックスイン。値を入れたいときは、引数を入力しましょう。
.my-mixin(@width:5px; @padding:7px){ border: @width solid red; padding: @padding; margin: 7px; } h1 { font-size: 24px; .my-mixin; } h2 { font-size: 20px; .my-mixin(10px; 20px); }
extend
.button { font-size: 14px; border: 1px solid black; } .button-ok { &:extend(.button); color: green; } .button-ng { &:extend(.button); color: red; }