Question

Is there any way to bypass LESS scoping? It’s becoming annoying. Basically, I have a .text-box which defines background, border, etc. Then, in a sub-section there’s a one-off change to add a margin-top: .text-box { margin-top: 10px }. Now I can’t use .text-box within that section and get my original box styles; instead, all I get is the margin-top. How can I get the definition higher in the heirarchy? I suppose I could make it a function, and call that function in both places, but being that I’m using LESS, I want to do less and KISS. In PHP, you’d get to the global namespace by using / prefix, or in C++ using :: prefix.

Additionally, it doesn’t seem like any definitions with the node name work for prototyping. Meaning, I can’t declare it ul.products, and then use ul.categories { ul.products }. I have to omit the node name in order to re-use it. Meaning: .categories { .products }. Is this an oversight/impossibility?

Thanks

Answer 1

ok so let’s say you’ve got your mixin defined, for example:

.text-box {
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
    margin-top: 5px;
}

now you want to add property or modify it in some subsection, then simply do this:

div.content {
    div.sub_section {
        .text-box;
        margin-top: 10px; // this will override 5px defined in the mixin.
    }
}

…which is putting your mixin in place, and adding some property you need to add (which will override any property from the mixin itself BUT make sure the overriding property is defined AFTER the mixin is called.

it’s not ideal solution, as it creates two declarations in the output css file (there will be one from mixin followed by the one you defined in .sub_section), but otherwise I don’t know a solution to this problem other than defining a parametric mixin..

—

your second issue – I think that less doesn’t support scope-limited definitions on purpose… if you really need to know that certain mixin is to be used by a specific tag, I would deal with it like so:

.ul_products   { ... }
.ul_categories { .ul_products; ... }

ul.categories { .ul_categories; }

you can also define a bundle and call stuff from there:

#ul {
  .products   { ... }
  .categories { ... }
}

ul.categories { #ul > categories; }

i hope i got it right.. ?