Вложенный диапазон внутри класса css

-1

Я кодирую динамическую форму с требуемыми полями проверки, в настоящее время у меня есть родительский класс с именем errorRequired, с вложенным классом x-form-label и внутри этого класса пробел с текстом, он работает правильно мои правила CSS за исключением span Я хотел бы изменить цвет на красный ...Вложенный диапазон внутри класса css

.errorRequired { 
    font-style: oblique; 
    color: $mweb-colour-red; 
    >.x-form-label{ 
    &span { 
     color: red; 
    } 
    } 
}

и скомпилированы CSS

.errorRequired{ 
    font-style:oblique; 
    color:red 
} 
.errorRequired span{color:red}

что я делаю неправильно?

Спасибо заранее

источник

2016-02-03 inane

Мы должны видеть ваш HTML, а также. Отправьте пример на что-то вроде codepen.io (это поддерживает sass). – JamieC

Я думаю, что проблема может заключаться в том, как управлять Sencha Touch тегами ..: - | – inane

отправьте пример только с html и css. получите эту работу, а затем добавьте в свою библиотеку js, и мы увидим, что это сломает ее. – JamieC

Вы должны использовать & вместо>.

.errorRequired { 
    font-style: oblique; 
    color: $mweb-colour-red; 
    & .x-form-label{ /* here, I changed > to & */ 
    &span { 
     color: red; 
    } 
    } 
}

или

.x-form-label { 
    .errorRequired & span { 
     color: red; 
    } 
}

источник

2016-02-03 11:34:48

это не работает для меня ... Я не знаю, что происходит ... – inane

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector –

Вы можете попробовать другую стратегию: .x-form-label {.errorRequired & span {}} –

Вы имеете продолжительность непосредственно рядом с амперсанд, который добавит «пядь» в классе «х-формы метки». Это выведет селектор как .errorRequired > .xform-labelspan.

Вы на самом деле не нужно амперсанд, поэтому попробуйте вместо этого:

.errorRequired { 
    font-style: oblique; 
    color: $mweb-colour-red; 
    >.x-form-label{ 
    span { 
     color: red; 
    } 
    } 
}

селектор диапазона должен затем выводится как .errorRequired > .xform-label span

источник

2016-02-03 11:35:37 JamieC

это не работает для меня ... Я не знаю, что происходит ... – inane

Вложенный диапазон внутри класса css

ответ

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