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

しかし、私が抱えている問題は、これが最後の2つのブロックを次のようにコンパイルすることです

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

私がホールツリーを継承したくないことを彼が知っているのに、同じスタイルのルールで自分自身を繰り返さない、つまり、同じコンテンツで2つのルールを作成しないことを彼が知っている場合、私はLESSで何ができますか...

4

1 に答える 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クラスが（のような）真のリストを保持するコンテナーでのみ使用されると仮定すると、ストレートセレクターからulを削除できる場合は、のセレクターを減らし、その部分を削除して作成できます。ちょうど、など。これにより、その呼び出しでのセレクターのネストの肥大化が減少します。background-positionsecurity-list ul li a.basket.creditcardul li.security-list a.basket

于 2013-01-03T19:43:16.370 に答える