Можно ли использовать @import в файле один css, как это.
@import file1
some css here
@import file2
chrome не распознает второй импорт для вышеуказанного, но это будет работать
@import file1
@import file2
some css here
Проблема здесь в том, что мне нужно "some css" быть посередине, потому что file2 переопределит некоторые из них. Есть ли другое решение, кроме импорта трех файлов из html?
Это невозможно:
Из http://www.w3.org/TR/CSS21/cascade.html#at-import:
Правило "@import" позволяет пользователям импортировать правила стиля из других таблиц стилей. В CSS 2.1 любые правила @import должны предшествовать всем другим правилам (кроме правила @charset, если они есть).
Из http://www.w3.org/TR/CSS21/syndata.html#at-rules:
Предположим, например, что парсер CSS 2.1 встречает этот стиль Лист:
@import "subs.css"; h1 { color: blue } @import "list.css";Второй "@import" является незаконным в соответствии с CSS 2.1. CSS 2.1 синтаксический анализатор игнорирует общее правило, эффективно уменьшая таблицу стилей в:
@import "subs.css"; h1 { color: blue }
@import. Если вы хотите переопределить свойства в файле 1, они также могут быть добавлены после блоков @import. Свойства, которые переопределены в файле 2, могут быть опущены. Как говорили другие, это недопустимый CSS, но я хочу добавить свои 2 цента. Если вы ищете способ преодолеть эту проблему, а также лучше писать CSS (то есть CSS, который более краткий, легче читать и поддерживать), вы можете использовать SASS. Это программа, которая улучшает синтаксис CSS и генерирует действительные файлы CSS, готовые для обслуживания браузеров. Он установлен как драгоценный камень Ruby, тогда вы можете запустить его таким образом.
sass --watch style.scss:style.css
Каждый раз, когда изменяется style.scss, скомпилируется новый style.css. scss - это стандартные расширения файлов для исходных файлов SASS. В SASS этот код действителен
@import "import1.scss";
a {
color: red;
}
@import "import2.scss";
и скомпилируется на следующий style.css
a {
/* This is the content of import1.scss */
color: white;
}
a {
color: red;
}
a {
/* This is the content of import2.scss */
color: white;
}
Обратите внимание, что я импортировал файлы, заканчивающиеся на scss. Это объявлено ссылкой SASS, чтобы не возвращаться к обычным импортам CSS.
Это нечетно, но CSSWG намеренно запрещает @import после правил свойств.
Они say:
Гибкость включает способность Рабочей группы назначать некоторые значение @import после определенного момента в таблице стилей в будущее, если новое поведение не противоречит существующим практика в определенных отношениях. Вы можете прочитать текущие требования, как говоря, что использование правила @import в определенных точках как-то Резерв рабочей группы для последующего использования, когда он находит использование, которое более ценным для авторов, чем возможность использовать его с обычным смысл прямо сейчас. Придание ему конкретного значения теперь вероятно, удалите этот параметр, так что это может быть потерей в долгосрочной перспективе.
Также они говорят, что сам @import уменьшает скорость загрузки (этот слабый аргумент, поскольку он не имеет значения, где размещается @import - перед правилами свойств или после них, но прежний разрешен).
Таким образом, мы вынуждены использовать обходной путь, например, использовать одну таблицу стилей "TOC", которая содержит только @imports в нужном порядке (но это увеличивает количество файлов, которые браузер должен загружать).
Используйте !important для предотвращения переопределения
Что-то вроде этого
<style>
.el{color:red !important;}
.el{color:blue;}
</style>
Цвет останется красным.