css - このCSSをlessに変換する方法

Question

次の css をよりドライレスなコードに変換するには、どの方法を使用しますか?

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

Answer 1

何もない。その CSS/LESS は素晴らしいものであり、LESS でそれを記述するより優れた/DRYer な方法はありません。

Answer 2

これは私が考えることができる最高のものです：

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

ただし、ミックスインの動作方法により、上記は次のようにコンパイルされます。

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;

        }

    }

}