If I want to write the following CSS in LESS:
.foo{
color:red;
}
.bar .foo{
color:blue;
}
I can write:
.foo{
color:red;
.bar&{
color:blue;
}
}
However if I had the following LESS:
.top-level
.foo{
color:red;
.bar&{
color:blue;
}
}
}
This would produce a class of:
.bar .top-level .foo
How can I have .bar appear only one level above .foo?
Such as:
.top-level .bar .foo
The only way I can see to do this is the following code snippet, but it's not as neat as I'd like:
.top-level
.foo{
color:red;
}
.bar .foo{
color:blue;
}
}
I don't see how to avoid multiple selectors here, however I believe that rearranging your selectors might make the code "clearer" :
.foo {
.top-level & {
color: red;
}
.top-level .bar & {
color:blue;
}
}
This way you clearly identify that your styling two instances of the class .foo based on their parents. Not as neat as what you wanted, but pretty cool still.
Related
so lets say my code is:
function test(){
}
function test2(){
}
and after prettier, i want it to look like:
function test(){
}
function test2(){
}
is it possible and if so, how/where?
When I do this:
class KotlinTestNestingWithAndTests8 : BehaviorSpec() {
override fun isolationMode() = IsolationMode.InstancePerLeaf
init {
given(" Some given") {
and("Some and") {
`when`("Some when") {
then("First then") {
(1).shouldBe(1)
}
then("Second then") {
(2).shouldBe(2)
}
then("Third then") {
(3).shouldBe(3)
}
}
}
}
}
}
IntelliJ shows this:
Why are the last two leaf tests not nested as siblings of the first leaf test?
Am I not understanding the use case for the InstancePerLeaf setting and tests are not supposed to be nested in this way when using it?
UPDATE:
I created a bug ticket.
In less, I have two class:
.business-type, .examine-type {
height: 74px!important;
... // there are many other styles
}
I have a requirement, only the class is .examine-type, I want the height work, how to realize this ?
You can easy access it by doing this:
.examine-type {
height: 74px!important;
}
.business-type, .examine-type {
... // there are many other styles
}
You can separate out .examine-type class in different rule
.examine-type {
height: 74px!important;
}
and inherit this class in .business-type if required,
.business-type{
&:extend(.examine-type);
... // other styles
}
I have the following setup at the moment
.classA {
&.classB {
}
&.classC {
}
// some more
}
So every class is dependent on classA. Not requirements changed and I need to have classB,c ... working outside of classA.
However, it's important that it's still connected to classA via &.
I'm looking for something like
.classA, {
... // the comma should indicate classA or nothing
}
The clean way would be
.classB {
&, &.classA {
// style here
}
}
for every class
I am using #content within mixins to simplify Media Queries. If I use the first mixin within nested classes the output bubbles up and nests the classes. The second example doesn't work at all (no errors), the nesting doesn't seem to work properly.
This works fine
// Everything larger than a landscape tablet but less than or equal to the desktop
#mixin desktop-only {
#media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
#content;
}
.lt-ie9
{
#content;
}
}
This does not work
#mixin ie8 {
.lt-ie9
{
#content;
}
}
Your mixin looks like it works to me:
.foo {
#include ie8 {
color: red;
}
}
The output is exactly as I would expect it to be:
.foo .lt-ie9 {
color: red;
}
Since your question doesn't give any useful information as to why the mixin is wrong, I'm going to assume that what you want is to have the classes in the reverse order. In which case, your mixin needs to be written like so:
#mixin ie8 {
.lt-ie9 & {
#content;
}
}
Output:
.lt-ie9 .foo {
color: red;
}