Вложенные LESS в классы css

Я пытаюсь сделать некоторые МЕНЬШИЕ из моего css, на данный момент я сделал много, но у меня проблема с длинным селектором KENDO Grid, он обертывает элемент в странных местах, а затем трудно найти. Это то, что я есть сейчас наВложенные LESS в классы css

МЕНЬШЕ

 .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, что я пытаюсь поставить 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 сейчас с этим CSS, мне не повезло. Txanks

источник

2015-07-30 Miomir Dancevic

Вы попробуйте онлайн Coverter CSS менее, как [это] (http://css2less.cc/)? –

@NikunjChotaliya - вы можете опубликовать это как ответ. Ура! – potatopeelings

LESS распознает CSS. Поэтому вам необязательно преобразовывать CSS в LESS. Просто скопируйте его, как есть, если вы просто хотите заставить его работать.

источник

2015-07-30 11:40:47 potatopeelings

Я знаю, но у него такой длинный селектор, что кто-то должен посмотреть, что –

На самом деле ИМО в правом отступе на самом деле будет немного сложнее поддерживать esp. так как вы не добавляете дополнительные стили на этом уровне. Но взгляните на предложение Nikunj - кажется, это отличный способ конвертировать CSS в LESS. Ура! – potatopeelings

вы можете указать переменные для ваших селекторов. Ваш код может быть таким:

@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"; 

    [email protected]{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; 
     } 
    } 
    } 

    [email protected]{short-selector}{ 
    &-wrap{ 
     @{table-selector}{ 
     padding-top:5px; 
     padding-bottom:5px; 
     } 
    } 
    } 


    [email protected]{short-selector}{ 
    & &-wrap{ 
     border-right-width: 0; 
     width: 101%; 
    } 
    }

Вот example

источник

2015-07-30 11:56:08 ostinred

также вы можете делать переменные в переменных, когда вам это нужно. – ostinred

Вложенные LESS в классы css

ответ

Смежные вопросы