Как изменить поведение класса в зависимости от его верхнего родителя?

У меня есть .tintTile, который зависит от родителей, следовательно, & SAS следующим образом:Как изменить поведение класса в зависимости от его верхнего родителя?

// Tint titles 
.tintTitle { 
    text-transform: uppercase; 
    font-family: @fontDemiBold; 
    color: @colorOrangeKWS; 

    .Windows7 & { 
     font-family: arial, sans-serif; 
     font-weight: bold; 
     color: @colorOrangeKWS; 
    } 
}

Во многих других классах, я использую .tintTitle следующим образом:

// titles, orange bold 
.tab { 
    &>div { 
     .tintTitle; 
     // etc. 
    } 
}

К сожалению, я не могу» т достичь .Windows7 (при условии, что факт Windows7 класс устанавливается в тег тела следующим образом:

<body class="Windows7"> 

     <p class="tintTitle">Good, it works</p> 

     <div class="tab"> 
      <div>This title doesn't make it</div>

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

источник

2014-12-30 Stéphane de Luca

Не могли бы вы добавить пример выбора (или) ожидаемого вывода CSS на вопрос помощник? Я немного смущен тем, что именно нужно. Вы ищете какой-то способ придумать '.Windows7 .tab> div'? – Harry

Насколько я понимаю ваш вопрос ваш код должен работать в Less см http://codepen.io/anon/pen/KwNWmq

Меньше кода:

// Tint titles 
.tintTitle { 
    text-transform: uppercase; 

    color: green; 

    .Windows7 & { 
     text-transform: initial; 
     color: red; 
    } 
} 
.tab { 
    &>div { 
     .tintTitle; 
     // etc. 
    } 
}

Вы используете parent selectors feature меньше, чтобы change the selector order

Единственное вы должны заметить, что свойства, установленные для вашего (не имеющие .windows), также будут применяться для ваших селекторов .windows. Вот почему я должен установить text-transform: initial;, в противном случае .windows * также получить верхний регистр, так же как и матч .tintTitle.

источник

2015-01-02 23:35:58

Как изменить поведение класса в зависимости от его верхнего родителя?

ответ

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