CODEWITHSUNDEEP
cssless
Kyle S
Kyle S

Reputation: 61

Trying to use the nested styles of Less, but can't figure out how to get a comma after one class name and before the other

The output I want is this:

#brandA, .logo{
  padding: 10px;
}

What would my less code look like to achieve that output? I know about & selectors but that doesn't seem appropriate here.

Update:

I should have asked how would I write it if I wanted to nest the .logo inside the #brandA style I figured I can't put a comma after #brandA like so: #brandA, { .logo{} } because that would add the comma to all nested styles.

Upvotes: 0

Views: 152

Answers (3)

Harry
Harry

Reputation: 89780

If I wanted to nest the .logo inside the #brandA style I figured I can't put a comma after #brandA like so: #brandA, { .logo{} } because that would add the comma to all nested styles.

There are two things note here:

  • Adding a , after #brandA will actually not add the comma to any of the nested blocks in the latest version of the Less compiler. The compiler would just ignore the comma.
  • More importantly, you should not be nesting .logo into #brandA. Nesting isn't the correct way to achieve selector grouping (that is, comma separated selectors). You should either write it as-is in the question (or) use :extend option like in the below snippet.
#brandA{ 
  padding: 10px;
  &.childA{
    color: red;
  }
  &.childB{
    color: steelblue;
  }
}
.logo{
  &:extend(#brandA);
}

If on the other hand the .logo element is a child (or a descendant element) of #brandA element then you could nest it as given in Erick Boileau's latest answer. For that scenario, nesting would be a valid choice.

Upvotes: 2

Erick Boileau
Erick Boileau

Reputation: 494

#brandA {
    text-align:center;
    > *{
        font-size:1.6rem;
    }
    .logo{
        padding: @margin;
    }
    .otherClass{
        a{
            color:red;
        }       
    }
}

Upvotes: 0

Erick Boileau
Erick Boileau

Reputation: 494

it's exactly the same with less , or with variable

#brandA, .logo{
  padding: @margin;
}

Upvotes: 1

Related Questions