Mixins with fewer inclusions do not have the ability to inherit

I am a beginner with Less.js and I am struggling to reuse the p.InputTitle in my examples. Unfortunately, it is not working for me and I keep encountering errors. After doing some research, I came across mixins and learned about the possibility of using 'Extend'. Can someone explain this concept to me?

Here is my code:

.LoginForm {
    p.InputTitle {
        color: #656565;
        font-size: 14px;
        font-family: @OpenSans;
        font-weight: 600;
    }
}

.Membership{
    p.InputTitle {
      .LoginForm p.InputTitle;
    }
}
cssless

Answer №1

One way to optimize your CSS is to use the extend pseudo class:

.Membership{
    p.InputTitle {
      &:extend(.LoginForm p.InputTitle);
    }
}

By doing this, you can combine styles and reduce redundancy in your code:

.LoginForm p.InputTitle,
.Membership p.InputTitle {
  color: #656565;
  font-size: 14px;
  font-weight: 600;
}

It's important to note the correct syntax for using mixins in Less:

If you adjust your original LoginForm CSS like this, it will work as a valid mixin:

.LoginForm {
    .InputTitle {
        color: #656565;
        font-size: 14px;
        font-weight: 600;
    }
}

You can then implement these styles in your Membership section using the mixin:

.Membership{
    p.InputTitle {      
        .LoginForm .InputTitle;
    }
}

Just keep in mind that this approach may result in redundant CSS properties being generated:

.LoginForm .InputTitle {
  color: #656565;
  font-size: 14px;
  font-weight: 600;
}
.Membership p.InputTitle {
  color: #656565;
  font-size: 14px;
  font-weight: 600;
}

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

Update the bootstrap navigation bar

I'm currently using bootstrap to construct my website. The navbar I have is quite typical with menu options, but I am aiming to modify the CSS in order to achieve a design similar to the image provided below (this design should be responsive and funct ...

cssbootstrap-4

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

javascripthtmlcss

Changing Column Heights for Mobile Devices using @media Queries

This specific CSS code is designed for a responsive template, creating three columns on desktops/laptops/iPads and stacking them for phones. However, there is an issue when viewing this layout on mobile devices where the stacked panels are fixed in heigh ...

htmlcssmedia-queries

Steps for creating a fixed menu bar that remains stationary while scrolling

I am facing three challenges: When I hover over my menu links, I want them to become 'bold', but it causes the items on the right to move slightly. How can I prevent this movement? In regard to the dropdown menu on "Two", how can I ensure t ...

htmlcss

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

htmlcsshover

Chrome compatibility problem with scroll spy feature in Bootstrap 3

Having trouble with scroll spy for boosters using the body method " data-spy="scroll". It seems to be working for some browsers like Edge and Google Chrome, but after multiple attempts, it still doesn't work for me. Even after asking friends to test i ...

javascripthtmlcssgoogle-chrome

Does Material-ui v4 display component names within the class attributes of the html DOM?

Upon transitioning from material-ui v3 to v4, it was observed that the react component/function names were included in the class attribute within the HTML. Is this normal? Could this potentially cause issues when trying to override class properties with n ...

javascripthtmlcssreactjsmaterial-ui

Toggle the checkbox to either allow or prevent scrolling within the div element's content

I have successfully used jQuery to append content to a div on my website. In addition, I have applied CSS to the div with the following styling: #data { height: 700px; position: absolute; left: 0; right: 0; overflow-y: auto; vertical-align: b ...

javascriptjqueryhtmlcss

In Bootstrap 3, the first column in a row will be positioned on the bottom side when viewed on mobile

I have arranged two columns side by side. <div class="row"> <div class="col-lg-2"> I want this column to be at the bottom on mobile devices. </div> <div class="col-lg-8"> I want this column t ...

csstwitter-bootstrap-3

Upgrading Bootstrap from version 3.4 to 5.3 in a .NET project

I have a website project created using .Net Framework 4.7.2. Currently, I am utilizing Bootstrap version 3.4.1 from here. Since Bootstrap 3.4 is now in an end-of-life phase, I need to upgrade to the latest version, 5.3. Upon replacing the old version fil ...

javascriptcssasp.net.netbootstrap-5

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Automatically adjusting the size of two divs with an unspecified width

Is it possible for the DIVs to resize based on the size of the nested image? That's what I'm trying to accomplish. Within a main div, I have two nested DIVs - one with an image to the right and the other with text to the left. I want these DIVs ...

jquerycssautosize

Swap out a Dropdown Menu for a text box in a flexible design layout

Is it possible to switch out a Dropdown Menu with a text box in a search form? The textbox needs to match the size of the Dropdown Menu being replaced. Here is the code for the form: <form action="#"> <input type="text" class ...

htmlcsstemplatesresponsive-design

What is the best way to insert additional HTML elements beneath a video background that extends into the navigation bar?

*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...

htmlcss

Implementing a delegator with ExtJS 4.1: A step-by-step guide

As a newcomer to javascript, I've recently been tasked with maintaining an application built in Sencha ExtJS 4. One of the components I need to modify is a tooltip feature that displays information when hovering over certain elements. This tooltip app ...

javascriptcssextjsdelegation

The navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

htmlcssbootstrap-4bootstrap-5cdn

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

javascripthtmlcssimagemobile

Arrange the HTML elements in a line, one following the next

I need assistance with aligning two dropdown lists in the jsbin provided. How can I position them one after the other, center them on the page, and ensure there is enough space between the two elements without manually adding spaces using   In additi ...

htmlcsstwitter-bootstrap

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser