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

Question

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

.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} 

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

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

Answer 1

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

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

Answer 2

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

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

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

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