Too many classes in LESS with identical styles?

Can you help me convert this style into LESS?

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

Here's my solution:

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

Current output:

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

Desired result:

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

Do you have any suggestions?

cssless

Answer №1

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

Answer №2

@mixin no-text-decoration () {
    text-decoration: none;
}

nav a, footer a, .fullscreen-container a {
    &:hover,
    &:focus {
        @include no-text-decoration ();
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

jqueryhtmlcss

Is it possible to display the <input type="text"> and the following <div> element on the same line instead of having space between them?

Could you please advise on how to adjust the layout to eliminate the space between the input type="text" and the following div element? When I set the width of the input type="text element to 180px and the width of the subsequent div to 20px, the div overf ...

javascriptjqueryhtmlcss

creating divisions between tables using css and html

Just starting out in web development and coding, I have a query about separating two tables. How can I do this? The relevant code is a few lines down. <table border="1" width="35%" cellspacing="10" cellpadding="5"> <tr> <th colspan= ...

htmlcss

Button, anchor not aligned horizontally due to differing padding

I've been pondering this question for quite some time now. Whenever I try to style a button in HTML using the a tag or button tag with equal padding on the top and bottom, the buttons still align horizontally. Please refer to the image below for clari ...

htmlcss

li experiencing a background width problem due to extended text

Check out this code snippet with a problem In the image below, you can see that the background of the li element with more text is larger compared to the others. It's important to note that the <ul> is scrollable. I've experimented with va ...

javascriptjqueryhtmlcss

New feature that allows color change to be black or white depending on background color

Can anyone suggest a function from material UI that can automatically change text color to either white or black based on the background color? For example: <AppBar color="primary"> <Toolbar> <Typography color="i ...

htmlcssreactjsmaterial-ui

The issue of horizontal overflow caused by the file chooser on the iOS Simulator

I am facing an issue with my Bootstrap 3 application where the page is not user-scalable: <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> Despite having a fully responsive form on the page ...

htmlioscsstwitter-bootstrap-3

Is CodeMirror's PHP mode failing to function properly?

There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...

phpcsscodemirror

Maximizing spacing for element alignment using space-evenly and :after

I have employed the pseudo-element :after to left-align the last line of a list of blocks, using space-evenly to justify these blocks. However, I am facing an issue where the blocks on the last line do not align properly with the others due to the space ta ...

htmlcss

Choosing the right eldest offspring

I've been struggling to target the initial div with the 'section' class in my CSS code. Here's a simplified version of my HTML: <div id="page_container"> <div></div> // this div has content, but no id or class ...

htmlcss

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

What is the best method to vertically center a container in bootstrap 4 at a specified height?

I'm trying to center a container in Bootstrap 4. I have an element with a width of 300px. .guide-background{ background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg"); background-repeat: no-repeat; backgrou ...

csstwitter-bootstrapbootstrap-4

What is the correct way to utilize window.scrollY effectively in my code?

Is it possible to have a fixed header that only appears when the user scrolls up, instead of being fixed at the top by default? I've tried using the "fixed" property but it ends up blocking the white stick at the top. Adjusting the z-index doesn&apos ...

cssreactjstypescriptnext.js

Which font, Helvetica or Verdana, has optimal support across all popular browsers?

When it comes to web design, the age-old debate between Helvetica and Verdana arises. Both fonts render differently on major browsers like IE and FF, making it difficult to determine which is better supported. So, which font is the best choice for ensurin ...

htmlcss

arrange both the content and slider in a single container using React Slick inline styling

I'm facing an issue with setting up a flex layout where the left section contains content and the right section contains a slider. However, despite applying flex to the main container, the slider is not being displayed. Can anyone help me fix this pr ...

javascriptcssreactjs

Animate the movement of a div

Within the given code snippet, the .logo element is initially hidden. The goal is to make it visible upon scrolling, while simultaneously animating the movement of the <ul> element to the right (e.g., sliding). Upon reviewing the demo provided, one c ...

javascriptjqueryhtmlcss

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

The navigation/hamburger icon vanishes after a click on a page link

I'm in the process of creating a single-page scrolling website. However, I am encountering an issue with the navigation bar. Specifically, when I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), ...

javascripthtmlcss

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

Utilizing HTML to hide rows within a table by comparing each row with the one that comes before it

I am in need of assistance to solve a project I am working on that involves a table structure similar to this: https://i.sstatic.net/U0AI4.png Below is the code snippet I am currently using: <table class = "table table-striped table-hover"&g ...

phphtmlcss