МЕНЬШЕ продлить не работает на импортируемый CSS

Я пытаюсь объединить имена классов в одно с помощью LESS расширить подмешать и этот простой пример не дает ожидаемых результатов:МЕНЬШЕ продлить не работает на импортируемый CSS

@import (less) "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; 

.todoFlag:extend(.fa .fa-flag all) { 
    color: red; 
}

.fa-flag класс выше в импортирован CSS имеет только один переключатель, как это:

.fa-flag:before { 
    content: "\f024"; 
}

результат компиляции заключается в следующем:

.todoFlag { 
    color: red; 
}

Я ожидал, что .todoFlag будет иметь :before из-за расширения, но выше это единственные строки, сгенерированные для todoFlag в скомпилированном css.

Правильно ли я использую удлинение? Продолжает ли работать на импортированные классы, как указано выше?

источник

2013-11-22 ShitalShah

я наконец понял (спасибо Mária Jurčovičová «s отличной рецензии на эту„скрытую“особенности МЕНЬШЕ).

.todoFlag:extend(.fa .fa-flag all) фактически расширяет флаг fa как потомок на fa. На самом деле fa-flag не является потомком fa, так что утверждение не имеет никакого эффекта. То, что я действительно хотел добиться, заключалось в замене нескольких классов на один класс. Так что если у вас есть,

<i class="fa fa-flag redColor"></i>

Я хочу заменить, что с,

<i class="todoFlag"></i>

Для этого todoFlag необходимо сначала наследовать все от фа, включая все псевдо селекторов, таких как :after, а затем он должен наследовать от fa-flag. Чтобы достичь этого, нам нужно использовать функцию LESS, которая допускает такое множественное наследование. Синтаксис для этого:

.todoFlag:extend(.fa all):extend(.fa-flag all) { 
    .redColor; 
}

Так что в основном вы вызываете продление дважды с каждым классом. И это работает!

источник

2013-11-23 04:58:29 ShitalShah

Более короткий синтаксис для '.todoIcon: extend (.fa all): extend (.fa-flag all)' is '.todoIcon: extend (.fa all, .fa-flag all)'. Вы также можете найти обновленную документацию LESS 'extend' [здесь] (https://github.com/less/less-docs/blob/master/content/features/extend.md) –

Обратите внимание, что, к сожалению, это будет работать только с версией шрифта «CSS» FontAwesome и НЕ «Меньшей» версией, поскольку ссылочные классы fa не существуют до компиляции, поэтому функция расширения просто бесшумно терпит неудачу и не расширяет определения до целевого класса. Я только что потратил 3 часа, пытаясь понять, почему это не сработает. –

Что делать '&: extend();' не работать, а только ': extend() {' work? также я вижу, что некоторые пользователи делают ': extend (c1, c2) {' почему он не работает для меня, и я должен определять их один за другим ': extend (c1): extend (c2) {' – deadManN

.todoFlag:extend(.fa .fa-flag all) распространяется только на .fa .fa-flag блоков (но «font-awesome.css» не имеет такого набора правил). Чтобы продлить только .fa-flag вам нужно:

.todoFlag:extend(.fa-flag all)

Если вам необходимо расширить как .fa и .fa-flag использования:

.todoFlag:extend(.fa all, .fa-flag all)

источник

2013-11-22 09:36:45

МЕНЬШЕ продлить не работает на импортируемый CSS

ответ

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