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，它不能完全符合您的描述。我认为这就是斯托基试图在他的回答中得到的。就 LESS 编码而言，至少有三种（或四种，取决于 LESS 的版本）不同的方法来完成它。

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

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

少 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 { line-height: 20px; }

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

LESS（16 行 [-3 from #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 from #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);
}
于 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 回答