Less-css - возможно ли получить родительский родитель?

Ответ 1

Зависит от структуры кода и может потребовать некоторого повторения кода

Вы не можете сделать это напрямую в большинстве случаев (см. второй пример для исключения).

Если бабушка и дедушка - это элемент

Это требует некоторого повторения, но не позволяет бабушке и дедушке не быть самой внешней оберткой (так что может быть большой бабушка и дедушка).

МЕНЬШЕ

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 - это класс, идентификатор и т.д., и это внешняя оболочка

Здесь нет повторений, но вы не можете иметь great grandparent в миксе. Также это только для версии 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*/   
}

Этот код работает, добавляя к "фронту" селектора дедушки и бабушки, поэтому дедушка и бабушка должны быть классом, идентификатором или другим селектором.

Добавление

На основе комментария о желании иметь красный фон, когда span пуст. Это не помещает фон в родительский элемент, но "подделывает" его с помощью дочернего элемента.

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

Ответ 2

Вы не можете произвольно перемещаться по DOM с меньшим количеством селекторов. Вместо этого используйте javascript.

& меньше обозначает объявленный селектор на один уровень вверх. Ярлык для уже определенного правила. В отличие от того, что вы якобы ищете.

Ответ 3

В соответствии с функцией LESS родительских селекторов, можно изменить порядок выбора, поместив & после элементов в вашем гнезде, тем самым получив доступ к родительский родительский элемент.

МЕНЬШИЙ код:

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

Результат CSS:

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

Ответ 4

Вы можете использовать mixin, тогда вы можете передавать переменные на него по спецификациям селектора grandparent.

Пример:

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