如何将此css转换为更少

Question

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

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

Answer 1

绝对没有。 CSS / 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;

        }

    }

}