css - less-css -- 親の親を取得することは可能ですか?

Question

親の親権を取得することは可能ですか？

試してみ& & { }ましたが、うまくいきませんでした。

祖父母に基づいて子要素のスタイルを設定しようとしています。

Answer 1

コード構造に依存し、コードの繰り返しが必要になる場合があります

ほとんどの場合、直接行うことはできません (例外については、2 番目の例を参照してください)。

祖父母が要素の場合

これには多少の繰り返しが必要ですが、祖父母が最も外側のラッパーにならないようにします (したがって、偉大な祖父母が存在する可能性があります)。

以下

grandparent {  
  /* grandparent styles */
  parent {
    /* parent styles */
    child {
      /* child styles */
    }
  }
  &.specialGrandpa {
    child {
      /* child styles with special Grandpa */
    }
  }
  &.specialGrandma {
    child {
      /* child styles with special Grandma*/
    }
  }
}

CSS出力

grandparent {
  /* grandparent styles */    
}
grandparent parent {
  /* parent styles */    
}
grandparent parent child {
  /* child styles */    
}
grandparent.specialGrandpa child {
  /* child styles with special Grandpa */    
}
grandparent.specialGrandma child {
  /* child styles with special Grandma*/    
}

Grandparent がクラス、ID などであり、最も外側のラッパーである場合

ここでは繰り返しは必要ありませんがgreat grandparent、ミックスに a を含めることはできません。また、これは LESS 1.3.1 以降のバージョン専用です (以前のバージョンでは誤ってスペースが追加されます)。

以下

.grandparent {  
  /* grandparent styles */
  .parent {
    /* parent styles */
    .child {
      /* child styles */
      .specialGrandparent& {
          /* child styles with special grandparent*/
      }
    }
  }
}

CSS出力

.grandparent {
  /* grandparent styles */    
}
.grandparent .parent {
  /* parent styles */   
}
.grandparent .parent .child {
  /* child styles */    
}
.specialGrandparent.grandparent .parent .child {
  /* child styles with special grandparent*/   
}

このコードは、祖父母セレクターの「先頭」に追加することで機能するため、祖父母はクラス、ID、または他のセレクター自体である必要があります。

補遺

spanが空のときに背景を赤くしたいというコメントに基づいています。これは親に背景を配置しませんが、子を使用して「偽造」します。

span:empty:after {
    content: '';
    position: absolute;
    top: -1px;
    right: -10px;
    left: -1px;
    bottom: -10px;
    display: block;
    background-color: red;
    z-index: -1;
}

Answer 2

セレクターが少ないと、DOM を任意にトラバースすることはできません。代わりに JavaScript を使用してください。

&in less は、1 レベル上の宣言されたセレクターを表します。すでに定義されているルールのショートカット。あなたが求めているとされるものとは対照的に。

Answer 3

LESS の親セレクター機能によると、ネスト内のアイテムの後に を配置することでセレクターの順序を変更でき、それによってアイテムの親の親にアクセスできます。&

LESS コード:

span {
  color:red;
  h6 & {
    color:white;
    div & {
      color:blue;
    }
  }
}

CSS の結果:

span {
  color: red;
}
h6 span {
  color: white;
}
div h6 span {
  color: blue;
}

Answer 4

ミックスインを使用して、祖父母セレクターの仕様に基づいて変数を渡すことができます。

例：

ul {
    .color-links(@color) {
        li a { // any link inside a child li
            color: @color;
        }
    }
    &.red {
        .color-links(#ff0000);
    }
    &.green {
        .color-links(#00ff00);
    }
}