У меня есть префикс Bootstrap classNames. Я не имею в виду использование .my-prefix .bs-class в качестве обертки, я имею в виду фактически префикс BS ClassNames, например; .my-bs-class.Как применить расширенные стили к дочерним селекторам другого классаName с предварительным процессором CSS?
Я изучил это программно (используя процесс Gulp), однако некоторые из селекторов для меня очень сложны, чтобы безопасно преобразовать, не говоря уже о сложностях микшинга.
Итак, я задавался вопросом о расширении BS с помощью функции LESS, и в то же время в простых случаях это работает нормально, например;
// BS
.btn {
color:red;
}
// Prefixed BS
.my-btn {
&:extend(.btn);
}
Выполнение этого же действия с вложенными селекторами не работает, как я надеюсь, и я подозреваю, что это не так.
Принимая это codepen: http://codepen.io/davewallace/pen/MJrMVj вы можете увидеть простой пример того, что я хотел бы, чтобы это произошло, однако выход CSS является:
.btn-group .btn,
.ui-btn-group .btn {
color: red;
}
в противоположность:
.btn-group .btn,
.ui-btn-group .ui-btn {
color: red;
}
что я Я пытаюсь достичь, если да, то как?
Примечание. Я открыт для альтернативных подходов к префиксу BS, однако технический долг, вызванный изменением источника BS, является наиболее нежелательным, если он не является минимальным.
EDIT: Я расширил этот вопрос, включив в него любые предварительные процессоры CSS, чтобы не ограничивать себя LESS, если другая технология может его достичь.
Нет, это невозможно через Less. (Лично я просто использовал бы базовое регулярное выражение, заменяющее, как '.' ->' .prefix-', хотя мне интересно, не заботитесь ли вы, чтобы скрипты BS были сломаны, так как они также жестко закодированы для использования определенных имен классов). –
Нет, мы избегаем JS, так как наши компоненты должны размещать то, что BS не будет/нет. Я опробовал https://www.npmjs.com/package/gulp-rcs, и автор помогает, что здорово, однако есть сложности, которые заставляют меня задаться вопросом, является ли это более безопасным решением, чем регулярное выражение. Спасибо, что подтвердили, что это невозможно с LESS. Давайте дадим ему день или два, и если вы опубликуете это как ответ, и никто не сможет предложить что-либо еще, вы выиграете очки: D – danjah
Это был результат gulp-rcs после того, как автор изменил его, btw: https: // gist. github.com/davewallace/2955dd243a74ecf0c84bec64ecd9e498 (prefixed классы BS с 'ui__'). Вы можете видеть, что он по-прежнему не является полным, и также выполняется на скомпилированном CSS, а не в LESS. – danjah