css - Less CSS の混合

Question

私はまだ Less CSS を使用するのが初めてで、問題の解決策を見つけることができませんでした。より効率的な出力結果が必要です。

私はこのコードを less に持っています:

.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: @trans-default;
        &:hover {
          color: @trans-hover-color;
        }
      }

      &.btn-primary {
        color: @trans-primary;
        &:hover {
          color: @trans-hover-color;
        }
     }
  }

そして、これはcss出力です：

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-default:hover {
  color: #f5f5f5;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

しかし、私が探している結果はこれです:

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;
}

.btn-trans.btn-default {
  color: #bdbdbd;
}

.btn-trans.btn-primary {
  color: #738ffe;
}

.btn-trans.btn-default:hover,
.btn-trans.btn-primary:hover {
  color: #f5f5f5;
}

色が同じであるため、ホバークラスがネストされています。

score 1 · Accepted Answer

CSS の生成は、ファイルサイズが 2 行増えることを除けば、まったく問題ありません。

本当に出力が必要な場合は、これを試すことができます：

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: @trans-default;
  }

  &.btn-primary {
    color: @trans-primary;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: @trans-hover-color;
    }
  }
}

score 1 · Accepted Answer

これは、一緒に使用するセレクターをグループ化するのとほとんど同じクラスを使用することで実現できます。

スニペット

.custom-class(){
  .btn-trans.btn-default:hover,
    .btn-trans.btn-primary:hover {
    color: #f5f5f5;
    }
}/*-- end of the custom class --*/
.btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;

      &.btn-default {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
      }

      &.btn-primary {
        color: #ccc;

        &:hover {
          color: #ccc;
        }
     }
  }

/*-- use of the custom class --*/
.custom-class;

または、上位レベルでグループ化することにより、ネストされたアプローチに進むことができます

スニペット

.btn-trans {
  color: inherit;
  background-color: transparent;
  transition: all .4s;

  &.btn-default {
    color: #ccc;
  }

  &.btn-primary {
    color: #ccc;
  }

  &.btn-default,
  &.btn-primary {
    &:hover {
      color: #ccc;
    }
  }
}

score 0 · Accepted Answer

これを使って

    .btn-trans {
      color: inherit;
      background-color: transparent;
      transition: all .4s;
      &.btn-default {
        color: @color;
       }
     &.btn-primary {
       color: @color;
      }

     &.btn-default,
       &.btn-primary {
       &:hover {
       color: @color;
     }
   }
 }

css - Less CSS の混合

3 に答える 3

Related

Reference