0

同じより少ない構造で異なるクラスに個別のcssを定義する方法として、代替手段として探しています。これがあります..

.dropdown-menu, .team-contact {
    li {
        a { 
            line-height: 40px;
            overflow: hidden;
            padding-left: 40px;
            position: relative;
            text-overflow: ellipsis; display:block;
        }
    }
}

私がやりたいことは、 とline-heightの両方.dropdown-menuを別々に.team-contactすることです。lesscss に if/else を sass として持つことは解決策ではないことはわかっていますが、インラインで定義されたさまざまなクラスにさまざまな css を定義するにはどうすればよいでしょうか...

このように言いましょう:-

a { 
    line-height: 40px; // for .dropdown-menu
    line-height: 20px; // for .team-contact
    overflow: hidden;
    padding-left: 40px;
    position: relative;
    text-overflow: ellipsis; display:block;
}

可能であれば短い解決策を探していますが、何か提案はありますか?

4

2 に答える 2

1

最終的には、有効な CSS を出力する必要があります。それが、Stocki が彼の答えで得ようとしていたことだと思います。LESS コーディングに関する限り、少なくとも 3 つ (LESS のバージョンによっては 4 つ) の異なる方法があります。

次のコードが示すこと...

...これは、LESS 入力と CSS 出力の組み合わせが、この特定のユース ケースで #1 よりも「短い」ものではないということです(より深いネストは #3 の恩恵を受ける可能性があります)。純粋に LESS を削減したいが、より多くの CSS 出力を気にしない場合 (私がそうするかどうかはわかりません)、#2 が選択される可能性があります (生成されたクラスを後で mixin 自体として使用する必要がないと仮定して)

未満 1.3.1+

＃1：いくつかのコードを繰り返すだけ

LESS (19 行)

.dropdown-menu, .team-contact {
    li {
        a { 
            line-height: 40px;
            overflow: hidden;
            padding-left: 40px;
            position: relative;
            text-overflow: ellipsis; 
            display:block;
        }
    }
} 
.team-contact {
    li {
        a { 
            line-height: 20px;
        }
    }
}

CSS 出力 (12 行)

.dropdown-menu li a, .team-contact li a { line-height: 40px; オーバーフロー: 非表示; パディング左: 40px; 位置: 相対; テキストオーバーフロー: 省略記号; 表示ブロック; } .team-contact li a { line-height: 20px; }

#2: 両方のクラスを完全に定義する mixin

LESS (16 行 [#1 から -3])

.shareProps(@className, @lh: 40px) {
  .@{className} {
      li {
          a { 
              line-height: @lh;
              overflow: hidden;
              padding-left: 40px;
              position: relative;
              text-overflow: ellipsis; 
              display:block;
          }
      }
  }
}  
.shareProps(dropdown-menu);
.shareProps(team-contact, 20px);

CSS 出力 (16 行 [#1 から +4])

.dropdown-menu li a {
  line-height: 40px;
  overflow: hidden;
  padding-left: 40px;
  position: relative;
  text-overflow: ellipsis;
  display: block;
}
.team-contact li a {
  line-height: 20px;
  overflow: hidden;
  padding-left: 40px;
  position: relative;
  text-overflow: ellipsis;
  display: block;
}

#3: デフォルト用にグループ化してからオーバーライドを生成する mixin

LESS (21 行 [#1 から +2])

.shareProps(@lh: 40px, @share: 0) {
  li {
    a { 
      line-height: @lh;
      .setShare();
    }
  }
  .setShare() when (@share = true) {
    overflow: hidden;
    padding-left: 40px;
    position: relative;
    text-overflow: ellipsis; 
    display:block;
  }
}

CSS 出力は#1 と同じ(12 行)

LESS 1.4.0 (#3 と同様ですが、 を使用extend)

LESS の行数と CSS Output は上記の #3 のようになります。

以下

.shareProps(@lh: 40px, @share: 0) {
  li {
    a { 
      line-height: @lh;
      .setShare();
    }
  }
  .setShare() when (@share = true) {
    overflow: hidden;
    padding-left: 40px;
    position: relative;
    text-overflow: ellipsis; 
    display:block;
  }
}   
.dropdown-menu {
  .shareProps(40px, true);
}
.team-contact:extend(.dropdown-menu all) {
  .shareProps(20px);
}
于 2013-05-30T16:06:22.453 に答える
1

以前に定義された css を上書きできるので、以下を使用できます。

.dropdown-menu li a, .team-contact li a {
    line-height: 40px;
    overflow: hidden;
    padding-left: 40px;
    position: relative;
    text-overflow: ellipsis; display:block;
}
.team-contact li a {
    line-height: 20px;
}
于 2013-05-30T09:40:48.830 に答える