Css Less - требуется доступ к вложенным элементам

Я нахожусь в середине создания новой типографии для проекта. Я использую меньше, поэтому решил использовать функциональные возможности для настройки некоторых стилей - вот пример:Css Less - требуется доступ к вложенным элементам

.serif 
{ 
    font-family: 'Roboto', sans-serif; 
    font-style:normal; 
    font-weight:400; 

    &.body1 
    { 
     font-size:1.4rem; 

     .mq-min(@desktop-bp; 
     { 
      font-size:1.3rem; 
     }); 
    } 
}

То, что я хочу, чтобы иметь возможность добиться того, чтобы вызвать любую внутреннюю комбинацию в то время как наследуя внешние родительские стили, как это:

body 
{ 
    .serif.body1; 
}

Я пробовал много различных сочетаний с и без &, но не смогли получить требуемую мощность, я хочу. Вот что я получаю в настоящее время:

body { 
    font-family: 'Roboto', sans-serif; 
    font-style: normal; 
    font-weight: 400; 
    font-size: 1.4rem; 
} 

body.body1 { 
    font-size: 1.4rem; 
} 
@media only screen and (min-width: 960px) { 
    body.body1 { 
    font-size: 1.3rem; 
    } 
}

В конечном счете, это то, что я должен ввести вручную стиль тело, чтобы работать в соответствии с требованиями:

body { 
    font-family: 'Roboto', sans-serif; 
    font-style: normal; 
    font-weight: 400; 
    font-size: 1.4rem; 
} 

@media only screen and (min-width: 960px) { 
    body { 
    font-size: 1.3rem; 
    } 
}

источник

2015-04-08 John Ohara

Пожалуйста, добавьте результат CSS вам нужно получить. (как я уже догадываюсь, нужный вам код Less - это просто '.serif.body {.serif.body1;}', но трудно сказать наверняка, не увидев результат CSS, который вы действительно ожидаете получить). –

@ seven-phase-max - спасибо за ответ. Вы правы, так как я могу дать мне anser, которого я хочу, - вопрос в том, как я могу получить от body.body1 до serif.body1? –

@ seven-phase-max - только что поняли, что вы, возможно, не полностью осознаете - есть другие вложенные стили внутри .serif - so .body2 и т. Д. –

Так на основе нескольких уточнений в комментариях выше (например body1 класс не должен появляться в результате CSS и используется только как примесь), следующая модификация делает трюк:

.serif { 
    font-family: 'Roboto', sans-serif; 
    font-style: normal; 
    font-weight: 400; 

    .body() { 
     .serif; 
     font-size: 1.4rem; 

     @media only screen and (min-width: 960px) { 
      font-size: 1.3rem; 
     } 
    } 
} 

body { 
    .serif.body; 
}

источник

2015-04-09 11:17:14

Css Less - требуется доступ к вложенным элементам

ответ

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