LESS　ミックスイン

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;
}