css - 在 less css 中为不同的类定义不同的 css

Question

我正在寻找一种替代方法，因为我可以在相同的较少结构中为不同的类定义单独的 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;
}

如果可能的话，我正在寻找一个简短的解决方案，有什么建议吗？

Answer 1

最终，您必须输出有效的 CSS，它不能完全符合您的描述。我认为这就是 Stocki 在他的回答中试图表达的意思。就 LESS 编码而言，至少有三种(或四种，取决于 LESS 的版本)不同的方法。

以下代码演示了什么...

...在 LESS 输入和 CSS 输出的组合中，没有什么比 #1 在这个特定用例中所做的“更短”(更深的嵌套可能受益于 #3​​) .如果你纯粹想减少 LESS，但不介意更多的 CSS 输出(不确定我会那样做)，那么 #2 可能是选择(假设生成的类以后不需要用作混合本身)

少 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 { 行高:40px； 溢出:隐藏； 左填充:40px； position:relative； 文本溢出:省略号； 显示: block ； } .team-contact li a { 行高:20px；

---

#2:完全定义两个类的 mixin

LESS(16 行 [-3 来自 #1])

.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 行 [+4 来自 #1])

.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 行 [+2 来自 #1])

.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 输出都像上面的#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);
}