Question

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

LESS

        .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放在这里，这里是

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现在这个CSS我没有运气。 Txanks

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

Answer 2

LESS识别CSS。因此，您不必将CSS转换为LESS。如果您只想让它正常工作，请按原样复制。

嵌套LESS到css类

2 个答案: