Как повторно использовать содержимое класса CSS в другом классе без копирования?

Можно ли использовать существующий класс css как контент в другом классе?

Я имею в виду что-то вроде:

Contained in some library:
.class1 { text-indent: 100 }

 I can not change this:
 <span class="class2" />

Определение для класса 2 также содержится в другой библиотеке. Поэтому я не мог изменить его напрямую.

But I want to do something like that in my CSS file:
.class2 { .class1 }

Я знаю, что в этой форме это невозможно. Но, возможно, можно использовать какой-то трюк для достижения поведения без копирования содержимого class1? Мне нужно это, потому что я хочу переопределить класс с содержимым из другого класса CSS. В нашем проекте также используется JQuery, но я бы сделал это скорее с помощью CSS.

EDIT: я должен объяснить больше, я не мог изменить, как .class1 определен, потому что этот класс находится в библиотеке, и я не мог изменить разметку класса span.

Ответы

Ответ 1

Нельзя делать в стандартном CSS то, что вы комментируете, поскольку нет чистого наследования.

Несмотря на то, что это не относится к вашим ограничениям кода, это более удобный способ сделать это:

    .class1, .class2 { text-indent: 100 }

    .class2 { 
            /* Styles you want to have only in class 2 */
    }

    <span class="class2" />

С другой стороны, как @A. Вольф указал, что вы можете использовать js/jq для добавления класса к определенным элементам: $(function() {$ ('. Class2'). AddClass ('class1')}); Затем просто установите правило CSS для этих элементов.

Если вы не хотите использовать JS, для чего-то подобного вам нужно будет использовать SASS или подобное, которое "компилируется" в CSS.

Ответ 2

Да, это possoble.

Запись:

.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}

Подробнее здесь.

Ответ 3

CSS не имеет возможности ссылаться на один набор правил из другого.

Ваши варианты включают:

Использование нескольких селекторов для вещей с общими правилами

.menu,
.nav {
    font-weight: bold;
}

.nav {
    display: inline-block;
}

Использование нескольких классов в одном элементе

.menu {
     font-weight: bold;
}

.nav {
     display: inline-block;
}

<li class="menu nav">

Создание вашего программного обеспечения программно

Например, SASS

@mixin menu {
    font-weight: bold;
}

.nav {
    display: inline-block;
    @include menu;
}

Ответ 4

Другой вариант - использовать LESS для этого. Это очень хороший инструмент и некоторые улучшения в разработке CSS.

Взгляните на их документацию, это очень приятно. О компиляторах я использую Koala и рекомендую его.

Ответ 5

Лучшим способом было бы сделать receclare class1 чуть ниже ваших пользовательских концов css и переопределить их со значениями, которые вы ищете. Таким образом, унаследованные значения, которые вы не можете изменить + значения, которые необходимо включить, должны применяться.

Ответ 6

Вы упомянули в одном комментарии, что вы не можете использовать МЕНЬШЕ, но я думаю, что, возможно, вы неправильно поняли, как LESS (или другой препроцессор) может вам помочь. То есть вы не дали никаких оснований, чтобы я мог понять, почему вы не можете использовать его (даже в своем обновлении). Насколько я понимаю вашу проблему, у вас есть следующие параметры:

Невозможно изменить html
Невозможно изменить файл css, который определяет .class1.
Вы можете изменить файл css, который определяет .class2.

Если это правильно, то вот как вы используете LESS (версия 1.5+). Вы создаете файл, определяющий .class2 a .less файл. Затем, чтобы сохранить его в чистоте, я считаю, что вам нужно будет выполнить двухэтапный процесс (возможно, вы можете сделать шаг 2 без шага 1).

Шаг первый: сделайте CSS более низким

Создайте файл, скажем CSStoLESS.less и поместите его в него:

@import (less) /path/to/your/your-css-defining-class1.css;

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

Шаг второй: используйте этот файл в качестве ссылки в своем LESS

Выполняя это в файле .less, определяющем .class2:

@import (reference) /path/to/your/CSStoLESS.less;

.class2 { .class1; }

Вы импортируете предыдущий файл css, который был преобразован в значение меньше, чем ссылка. Это предотвратит получение дубликатов селекторов для .class1 или всего, что содержится в исходном файле css. Теперь вы можете использовать включение .class1 так же, как вы показываете в своем вопросе, чтобы сделать свойства .class1 похожими на .class2.

Возможно, это работает только:

@import (reference) /path/to/your/your-css-defining-class1.css;

.class2 { .class1; }

То, что я не знаю, - это если включение (reference) также по умолчанию делает make .css в код LESS, например, приведение типа t216 > к типу на этапе 1. Мне нужно исследовать это больше. Если это так, то это одношаговый, а не двухэтапный процесс.

Ответ 7

Таким образом вы можете определить 2 класса

.class1, .class2 { text-indent: 100 }

И это сработает для вас

Кроме того, если вы хотите еще добавить объявление в class2, вы можете определить его

.class2 { /*whatever you want here*/ }

Ответ 8

Я предполагаю, что вы хотите все, что находится в .class1 плюс дополнительные свойства в .class2

Один из способов - просто применить оба класса к нужному элементу.

<span class="class1 class2" />

другой означает назвать оба класса при настройке свойств

.class1, .class2 {text-indent: 100}

.class2{/*extra properties here*/}