I'm trying to achieve something like this in LESS:
.a {
// some properties
}
.b {
.a {
.a();
}
}
It doesn't work, because it takes the .a() from the closest scope, which is .b .a in this case. I need this quirky rule just to overwrite another context for .a to use the default .a styles.
Can I call a mixin of the same selector in LESS? Or maybe there are some workarounds?
Use a separate mixin class and refer to it in both non-inside-b and inside-b cases.
To prevent outputting the mixin class, use the functional mixin-definition syntax:
.a() {}
Also, mixins can be defined inside a dummy id as a namespace, and that mixins shouldn’t be output too.
Related
I'd like to get the result below using sass nesting
css
.box {...}
h3.box-title {...}
I tried code like this, but it causes an error.
sass
.box {
h3.&-title {
...
}
}
I'd like to know if there is any way to do this keeping sass nesting?
I know that it's not good to write HTML element on CSS,
but I'm working on a project that I can't modify existing CSS and need to overwrite them.
Try this:
.box {
#at-root h3#{&}-title {
...
}
}
I used the sass interpolation #{} to compile expectedly the value of &, and #at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)
Here's the captured result:
Anyway, I don't think this is a good practice to write sass/scss
.box
and
.box-title
are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.
Also & is used to look for additional class names. i.e.
.box {
&.box-title {}
}
would be
.box.box-title {}
If I have this
.A {
}
input.A {
}
how can I use sass to factor out the parent .A? I tried
.A {
input.& {
}
}
but it didn't work.
Sass always seems to have a problem when appending the parent selector at the end. It doesn't have any problems when the parent selector is added at the start or in the middle.
One possible solution would be to use the #at-root directive. The #at-root directive tells compiler to move the selector to the root level (instead of being an inner nested block) and then appending the parent selector through selector interpolation produces the expected output.
.A {
#at-root input#{&} {
property: value;
}
}
(Using just selector interpolation without #at-root directive would end up producing .A input.A.)
Using variable on mixin or extend in Less.js as follow will throw error.
#bar : bar;
.#{bar} {
background: yellow;
}
// ParseError: Missing closing ')'
.foo {
.#{bar}();
}
// Not work
.jam {
&:extend(.#{bar});
}
Has Less.js a proper syntax to call mixin with variables?
You are trying to call a mixin using selector interpolation, which is not possible.
As for extend, Less documentation states it clearly:
Extend is NOT able to match selectors with variables. If selector contains variable, extend will ignore it.
I am trying to learn less to reduce the pain of repetitive css. One thing that confuses me is the syntax of namespace in less. To my understanding, less is compatible with css, therefore
#myelement-id{}
is an id selector. On the other hand, less supports namespace by specifying
#namespace{}
So, when I read a less file, how can I tell which "#" is for id selector and which is for namespace?
Thanks for your help.
There is no difference. A #id or .class can be used as a namespace call to access its other classes or mixins. To make it different, you need to make it a mixin. So either of these is valid:
#namespace {
.test {
prop: 1;
}
}
#namespace() {
.test {
prop: 1;
}
}
The first will produce css output as an id selector, the second will not. But either can access the nested values, so either of these work inside a selector block to access the .test class via this:
.class {
#namespace > .test;
}
But the output will be different, as the first will be:
#namespace .test {
prop: 1;
}
.class {
prop: 1;
}
And the second just:
.class {
prop: 1;
}
More over, there's no difference even between a mixin and a namespace. A namespace can also be parametric (though parametric namespaces have some unusual properties/side-effects that make them differ from non-parametric namespaces). See for example #1205, #1316, #1525.
Basically, LESS namespace is just any ruleset that contains another ruleset(s). It's more like a logical concept/convention, not a language construction.
If I have a dozen CSS selectors, and want to assign :hover properties to all of them, I'm used to doing this:
selector, selector2, someOtherSelector, someSelector div {
//some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
//some properties
}
Typing :hover four times seems redundant. Is there a way to group the selectors like
(selector, selector2, someOtherSelector, someSelector div):hover {
//some properties
}
instead?
Not natively in CSS. By using something like SCSS, you can write:
selector, selector2, someOtherSelector, someSelector div {
// some properties
&:hover {
// some more properties
}
}
If they all share the same hover properties you could create a class that is shared for all that defines your :hover
So you'd get:
allSelectors, selector, selector2, someOtherSelector, someSelector div {
//some properties
}
allSelectors:hover {
//some properties
}
Re-usable classes makes for cleaner and less code.
Sadly, there's not really any easier way of doing what you're trying to do, unfortunately. Unless you want to move the styles to jQuery or something (but that's not a good solution).