LessCss creates CSS by inheriting styles from the parent class up to the nested caller

Question

LessCss creates CSS by inheriting styles from the parent class up to the nested caller

Let's kick things off with an example, shall we?

Imagine I have the following class:

<html class="browser-ie"> ...

Now, let's say I want to use my mixin on a specific element:

.browser-ie(@mixin){
        html.browser-ie {
                @mixin();
        }
}

I'd like to be able to call this mixin from an element like so:

.main {
       .nested {
            .morenested {
                   .browser-ie({ min-height:100% });
            }
       }
}

This would generate the following CSS:

html.browser-ie .main .nested .morenested { min-height:100%; }

Is there a tool in existence that can make this happen?

css less

Answer 1

Answer №1

It appears that you are in search of the ancestor selector within your preprocessor. This will help generate the desired CSS output.

.container {
  .child {
    .grandchild {
      html.browser-mozilla & {
        max-width: 100%;
      }
    }
  }
}

Remember, the ancestor selector can be placed anywhere within a declaration and will inherit all previously nested classes up to that point, adding them to your final string.

Answer 2

It appears that you are in search of the ancestor selector within your preprocessor. This will help generate the desired CSS output.

.container {
  .child {
    .grandchild {
      html.browser-mozilla & {
        max-width: 100%;
      }
    }
  }
}

Remember, the ancestor selector can be placed anywhere within a declaration and will inherit all previously nested classes up to that point, adding them to your final string.

Answer 3

Answer №2

Is this the style you were looking for?


.myStyle {
    max-width: 100%;
}

.container {
    .innerDiv {
        .nestedDiv {
            .myStyle;
        }
    }
}

Here is the output:

/* Created using CSS version 3.0 */
.myStyle {
  max-width: 100%;
}
.container .innerDiv .nestedDiv {
  max-width: 100%;
}

Answer 4

Is this the style you were looking for?


.myStyle {
    max-width: 100%;
}

.container {
    .innerDiv {
        .nestedDiv {
            .myStyle;
        }
    }
}

Here is the output:

/* Created using CSS version 3.0 */
.myStyle {
  max-width: 100%;
}
.container .innerDiv .nestedDiv {
  max-width: 100%;
}

LessCss creates CSS by inheriting styles from the parent class up to the nested caller

Answer №1

Answer №2

Similar questions

Struggling to get the HTML layout just right on my MVC 5 Razor Page with Bootstrap CSS

Wait for AngularJS to load when the background image of a div becomes visible

Styling grids in Xamarin

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

The Chrome browser's default stylesheet is overriding the styles of my website

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

The standard bootstrap navbar does not automatically create spacing for content below it

Guide to positioning an image at the center across 2 columns using Bootstrap

Transforming the NavBar in React: A guide to dynamically updating values

MANDATORY activation of CONFIRMATION

Do you need a list that doesn't have any indentation?

What is the method for adjusting the fade OUT speed of Bootstrap tabs?

Creating a 3-column div with varying sizes of text in another div at the center position

Error encountered: Unexpected token when defining inline style in React

Interactive text animation triggered by a click

Guide to designing a CSS gradient with a downward arrow linked to a specific container

When hovering over a select element within a grid-area that has overflow set to scroll, Safari unexpectedly jumps to the

What is the best way to collapse a div underneath another div when resizing the browser window?