在较少的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，我知道他们没有解决方案在ifc中使用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，因此您可以使用：

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

Answer 2

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

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

... LESS输入和CSS输出的组合中没有任何“更短”，而不是＃1在这个特定用例中的作用（更深的嵌套可能会从＃3中受益） 。如果你纯粹想要减少LESS，但不介意更多的CSS输出（不确定我会这样做），那么＃2可能是选择（假设生成的类不需要以后用作mixins）< / p>

LESS 1.3.1 +

---

＃1：只需重复一些代码

少（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;   溢出：隐藏;   padding-left：40px;   位置：相对;   文本溢出：省略号;   显示：块; } .team-contact li a {   行高：20px; }

---

＃2：完全定义两个类的mixin

少（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行[来自＃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，然后生成覆盖

少（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相同。

<强> LESS

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