css - 嵌套 LESS 到 css 类

Question

我正在尝试从我的 css 中减少一些，现在我已经做了很多，但是我对 KENDO Grid 的长选择器有问题，它将元素包裹在奇怪的地方然后很难找到。这是我现在拥有的

少

        .k-grid {
        .k-pager-wrap {
            .color-background(@white);
            border-top: 0 none;
        }

        .k-grid-header {
            .color-background(@white);

            thead tr[role="row"]:first-child {
                display: none;
            }

            .k-grid-header-wrap {
                table {
                    thead {
                        tr {
                            th.k-header {
                                font-size: @font-size-large;
                            }
                        }
                    }
                }
            }
        }

        .k-grid-content {
            overflow: auto !important;
        }
    }

     .k-pager-numbers {
    li {
        a.k-link {
            .color-text(@grey) !important;

            &:hover, &:active, &:focus, &:visited {
                .color-background(@grey-background) !important;
                .color-text(@brand) !important;
            }
        }

        .k-state-selected {
            .color-background(@grey-background) !important;
            border: medium none;
            .color-text(@brand);
        }
    }
}

问题是我有另一个 CSS，我试图把它放在这个 k-grid 的 inisde 中，这里是

CSS

        .k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon {
    height: 26px;
}

.k-grid-header-wrap table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon span.k-icon.k-i-close {
    margin-bottom:18px;
}


table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-focused,
table thead tr.k-filter-row th span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header.k-state-hover {
    .lh-box-shadow(none) !important;
    border-color: @grey-border !important;
}

.k-grid-header-wrap table thead tr.k-filter-row th {
    padding-top:5px;
    padding-bottom:5px;
}


div.k-grid-header div.k-grid-header-wrap {
    border-right-width: 0;
    width: 101%;
}

如您所见，它是一个非常长的选择器，但我需要将我所有的 CSS 转换为我已经拥有的 less，只是为了附加 LESS，有人可以帮助我吗？我已经浪费了一整天的时间来制作这个以前的 LESS 现在用这个 CSS 我没有运气。谢谢

Answer 1

您可以为您的选择器提供变量。 你的代码可以是这样的:

  @first-long-selector: ~"span.k-filtercell span.k-operator-hidden button.k-button.k-button-icon";
  @second-long-selector: ~"span.k-filtercell span.k-operator-hidden span.k-widget.k-autocomplete.k-header";
  @short-selector: k-grid-header;
  @table-selector: ~"table thead tr.k-filter-row th";

  .@{short-selector}{
    &-wrap{
      @{table-selector}{
          @{first-long-selector} {
          height: 26px;

            .k-icon.k-i-close{
              margin-bottom:18px;
            }
          }
      }
    }
  }

  @{table-selector}{
    @{second-long-selector}{
        &.k-state-focused,
        &.k-state-hover{
          .lh-box-shadow(none) !important;
          border-color: @grey-border !important;
        }  
    }
  }

  .@{short-selector}{
    &-wrap{
      @{table-selector}{
        padding-top:5px;
        padding-bottom:5px;
      }
    }
  }


  .@{short-selector}{
    & &-wrap{
      border-right-width: 0;
      width: 101%;
    }
  }

这是一个 example