Вставка изображения с помощью класса: before

Question

Я вставляю изображение в контейнер div с помощью css следующим образом:

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
}

Я хочу применить некоторые атрибуты css к этому изображению, не перечисляя их вместе с атрибутом "content", но применяядругой стиль, чтобы уменьшить накладные расходы CSS.Как-то так, но это, конечно, не работает:

.ft-folder-closed:before {
    content: url('../ll-filetree/img/ft-plus.16.png');
    inherit: ft-floder-icon;
}

Есть ли шанс сделать это?

Answer 1

Вы можете сгруппировать селекторы CSS, чтобы применять одинаковые стили к нескольким элементам.Это позволяет применять одни и те же стили к нескольким элементам без повторения стилей.

Пример:

.ft-folder-icon, .ft-folder-closed:before {
     color: red;
}

При этом применяется цвет: красный;стиль как для элементов .ft-folder-icon, так и для .ft-folder-closed: before псевдоэлементы.

Если вы решили использовать препроцессор CSS, например LESS , выможно абстрагировать ваш CSS с помощью «mixins», аналогично следующему:

.ft-folder-closed:before{
     .ft-folder-icon;
}

Используя «mixins», вы можете встроить все свойства класса в другой класс, просто включив имя класса в качестве одного из его свойств.Это очень похоже на переменные, но для целых классов.