LESS - 具有相同风格的多个不同类别?

lau*_*kok 1 css less

你会如何在LESS中写下这种风格?

nav a:hover,
nav a:focus,
footer a:hover,
footer a:focus,
.fullscreen-container a:hover,
.fullscreen-container a:focus {
    text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

我的尝试:

.text-decoration-none () {
    text-decoration: none;
}

nav a {
    &:focus,
    &:focus {
        .text-decoration-none ();
    }
}

footer a {
    &:focus,
    &:focus {
        .text-decoration-none ();
    }
}

.fullscreen-container a {
    &:focus,
    &:focus {
        .text-decoration-none ();
    }
}
Run Code Online (Sandbox Code Playgroud)

结果:

nav a:focus,
nav a:focus {
  text-decoration: none;
}
footer a:focus,
footer a:focus {
  text-decoration: none;
}
.fullscreen-container a:focus,
.fullscreen-container a:focus {
  text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

理想的结果:

nav a:hover,
nav a:focus,
footer a:hover,
footer a:focus,
.fullscreen-container a:hover,
.fullscreen-container a:focus {
    text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

小智 8

nav, footer, .fullscreen-container {
  a {
    &:hover, &:focus {
      text-decoration: none;
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 是的,完全避免混合.我更喜欢它! (3认同)