Nested LESS to css classes

Question

I am trying to make some LESS from my css, for now i have made a lot, but i have problem with long selector of KENDO Grid, it wrappes element in strange places and then it is hard to find. This is what i have for now on

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);
        }
    }
}

the problem is that i have is with another CSS that i am trying to put inisde of this k-grid, here is

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%;
}

As you may see it is veery long selector, but all my CSS i need to convert to less I already have, just to append the LESS, can somebody help me. I have lost entire day for making this previous LESS now with this CSS i have no luck. Txanks

Answer 1

you can give variables for your selectors. Your code can be like this:

  @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%;
    }
  }

Here is an example

Answer 2

LESS recognizes CSS. So you don't necessarily have to convert your CSS to LESS. Just copy it in as is if you just want to get it working.