teelou teelou - 1 month ago 14
Less Question

LESS - multiple different classes with the same style?

How would you write this style below in LESS?

nav a:hover,
nav a:focus,
footer a:hover,
footer a:focus,
.fullscreen-container a:hover,
.fullscreen-container a:focus {
text-decoration: none;
}


My attempt:

.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 ();
}
}


Result:

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;
}


Ideal result:

nav a:hover,
nav a:focus,
footer a:hover,
footer a:focus,
.fullscreen-container a:hover,
.fullscreen-container a:focus {
text-decoration: none;
}


Any ideas?

Answer
nav, footer, .fullscreen-container {
  a {
    &:hover, &:focus {
      text-decoration-none;
    }
  }
}