css - 如何将此CSS转换为更少

Question

您将使用什么方法将以下 css 转换为更干的代码：

nav ul,
nav ol,
ul.reset,
ol.reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

Answer 1

绝对没有。CSS/LESS 很棒，没有更好/更干的方式来用 LESS 编写它。

Answer 2

这是我能想到的最好的：

.resetList() {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav {
    ul, ol {
        .resetList;
    }
}
ul, ol {
    &.reset {
        .resetList;
    }
}

然而，由于 mixins 的工作方式，上面会编译成这样：

nav ul,
nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.reset,
ol.reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

所以我同意@ascii-lime的观点，即纯 CSS 可能是这种简单事情的更好途径。希望少将在未来提供替代方案。

Answer 3

如果您想将其转换为LESS. 通过使用 LESS 技术，代码将变得更长。最好保持原样。

如果你仍然想这样做，你可以试试这个：

nav {

    list-style: none;
    margin: 0;
    padding: 0;

    ul, ol {

        list-style: none;
        margin: 0;
        padding: 0;

        &.reset {

            list-style: none;
            margin: 0;
            padding: 0;

        }

    }

}