2

当我想写类似的东西时

.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;
}

我最终写：

.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;
            }
        }
    }

但我遇到的问题是这会将最后两个块编译为

.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 { ... }

我真正想要的是：

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

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

我可以在LESS中做什么，他知道我不想继承洞树，但仍然不会在相同的样式规则上重复自己，换句话说，不要创建 2 个具有相同内容的规则......

4

1 回答 1

1

您的问题是您想忽略巢内的巢，这（至少目前）不可能。如果它确实有效，它也会使代码难以阅读，因为您不会期望在嵌套中定义非嵌套项。

我认为对此的一种优雅解决方案，尤其是在您的情况下，是进一步抽象嵌套。.security这段代码通过将其全部定位在一个嵌套中来接近您想要的：

.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;
         }
     }
}

上面的代码将调用从列表中的深层嵌套中分离出来，这确实需要在调用中重复少量代码ul li a，但它会产生以下 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;
}

假设.security-list该类仅用于包含真实列表的容器（如 a ul），那么如果您能够background-position从直接security-list ul li a选择器中删除 ，则可以减少 and 的选择器，.basket并.creditcard通过删除它的ul li部分来制作它just.security-list a.basket等。这将减少该调用上的选择器嵌套膨胀。

于 2013-01-03T19:43:16.370 回答