CODEWITHSUNDEEP
less
balexandre
balexandre

Reputation: 75073

Working with Less: avoiding tree inheritance

When I want to write something like

.security-list ul {
    list-style: none;
    margin-left: 0;
}
.security-list ul li {
    padding: 10px 9px;
    display: inline-block;
}
.security-list ul li a {
    width: 234px;
    color: #000;
    text-decoration: none;
    display: inline-block;
    background-image: url(http://domain.com/infopage-icons.png);
    background-position: 200px 0;
    background-repeat: no-repeat;
}
.security-list ul li a.basket,
.security-content h3.basket {
    background-position: 200px 0;
}

.security-list ul li a.creditcard,
.security-content h3.creditcard {
    background-position: 200px -205px;
}

I end up writting:

.security-list ul {
    list-style: none;
    margin-left: 0;

    li {
        padding: 10px 9px;
        display: inline-block;

        a {
            width: 234px;
            color: #000;
            text-decoration: none;
            display: inline-block;
            background-image: url(http://domain.com/infopage-icons.png);
            background-position: 200px 0;
            background-repeat: no-repeat;

            &.basket,
            .security-content h3.basket {
                background-position: 200px 0;
            }

            &.creditcard,
            .security-content h3.creditcard {
                background-position: 200px -205px;
            }
        }
    }

but the problem I have is this will compile the last 2 blocks as

.security-list ul li a.basket,
.security-list ul li a .security-content h3.basket { ... }

.security-list ul li a.creditcard,
.security-list ul li a .security-content h3.creditcard { ... }

where what I really want is:

.security-list ul li a.basket,
.security-content h3.basket{ ... }

.security-list ul li a.creditcard,
.security-content h3.creditcard { ... }

What can I do in LESS that he knows that I do not want to inherit the hole tree, but still not repeat myself on the same style rule, in other words, don't create 2 rules with the same content...

Upvotes: 2

Views: 104

Answers (1)

ScottS
ScottS

Reputation: 72261

Your problem is that you want to ignore the nest inside a nest, which is not (at least currently) possible. If it did work, it also would make for challenging code to read, as you would not expect a non-nesting item to be defined inside a nest.

I think one elegant solution to this, especially in your case, is to abstract the nest even further. This code gets close to what you desire by locating it all within a .security nest:

.security {
    &-list ul {
        list-style: none;
        margin-left: 0;

        li {
            padding: 10px 9px;
            display: inline-block;

            a {
                width: 234px;
                color: #000;
                text-decoration: none;
                display: inline-block;
                background-image: url(http://domain.com/infopage-icons.png);
                background-position: 200px 0;
                background-repeat: no-repeat;
            }
         }
     }

     &-list ul li a,
     &-content h3 {
         &.basket {
                background-position: 200px 0;
         }
         &.creditcard {
                background-position: 200px -205px;
         }
     }
}

The above disaccociates the call from the deep nesting in the list, which does require a small repetition of code in the ul li a call, but it produces this CSS:

.security-list ul {  
  list-style: none;  
  margin-left: 0;
}
.security-list ul li {
  padding: 10px 9px;  
  display: inline-block;
}
.security-list ul li a {
  width: 234px;  
  color: #000;  
  text-decoration: none;  
  display: inline-block;  
  background-image: url(http://domain.com/infopage-icons.png);  
  background-position: 200px 0;  
  background-repeat: no-repeat;
}
.security-list ul li a.basket,
.security-content h3.basket {  
  background-position: 200px 0;
}
.security-list ul li a.creditcard,
.security-content h3.creditcard {  
  background-position: 200px -205px;
}

Assuming the .security-list class is only used on a container that holds a true list (like a ul), then if you are able to remove the background-position from the straight security-list ul li a selector, you can then reduce the selector of the .basket and .creditcard by removing the ul li porition of that to make it just .security-list a.basket, etc. This would reduce the selector nesting bloat on that call.

Upvotes: 1

Related Questions