Используя LESS, я могу ссылаться на родительский элемент во вложенных дочерних элементах - PullRequest
Новая
       8

Используя LESS, я могу ссылаться на родительский элемент во вложенных дочерних элементах

0 голосов
/ 20 декабря 2018

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

У меня есть LESS (css), который одинаков как для элементов th и td с классом .col-checkbox, так и для элемента label в обеих ячейках с общим css.Я хотел бы добавить поле сверху / снизу к метке, если она находится в ячейке th.

.html * 

<table>
    <tr>
        <th class="col-checkbox">
            <div>Column Label</div>
            <label class="custom-checkbox">
                <input type="checkbox" />
                <span class="checkbox"></span>
            </label>
        </th>
        <th>
           Unimportant, there are more columns as well
        </th>
    </tr>
    <tr>
        <td class="col-checkbox">
            <label class="custom-checkbox">
                <input type="checkbox" />
                <span class="checkbox"></span>
            </label>
        </td>
        <td>
           Unimportant, there are more columns as well
        </td>
    </tr>
</table>

.less file 

.col-checkbox {
    width: 30px;
    // more css here

    label.custom-checkbox {
         height: 24px;
         // more css here

        // I know I can do the following, but I'd like to not have to add
        // more classes if I can someone make this dependent on whether it 
        // is in the th or td element
        //&.header {
        //    margin: 6px auto;
        //}
        //
        //&.data {
        //    margin: 0 auto;
        //}
    }
}

Я знаю, что могу заставить это работать так, как у меня выше, но мне было любопытно, если бы я мог сделать это, просто ссылаясь на элементы td и th, не дублируя другие CSS.Я так не думаю, но решил, что все равно спрошу.

1 Ответ

0 голосов
/ 20 декабря 2018

Похоже, вы уже знакомы с оператором &.Ну, ему не нужно идти перед селектором.Вместо этого вы можете использовать его после селектора, например, th&, чтобы получить то, что вы хотите.

Так вот: 

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
  }

  th& {
    margin: 10px 0;
  }
}

Выводит это: 

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
th.col-checkbox {
  margin: 10px 0;
}

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

Рассмотрите этот код: 

.col-checkbox {
  width: 30px;
  // more css here

  label.custom-checkbox {
    height: 24px;
    // more css here
    .checkbox& {
      color: navy;
    }
  }
}

Вы можете ожидатьполучить это из этого: 

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.col-checkbox label.custom-checkbox.checkbox {
  color: navy;
}

Но на самом деле вы получите это: 

.col-checkbox {
  width: 30px;
}
.col-checkbox label.custom-checkbox {
  height: 24px;
}
.checkbox.col-checkbox label.custom-checkbox {
  color: navy;
}
...