CSS @import и его порядок

Можно ли использовать @import в файле один css, как это.

@import file1
some css here
@import file2

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

@import file1
@import file2
some css here

Проблема здесь в том, что мне нужно "some css" быть посередине, потому что file2 переопределит некоторые из них. Есть ли другое решение, кроме импорта трех файлов из html?

Ответ 1

Это невозможно:

Из 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, могут быть опущены.

Ответ 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.

Ответ 3

Это нечетно, но CSSWG намеренно запрещает @import после правил свойств.

Они say:

Гибкость включает способность Рабочей группы назначать некоторые значение @import после определенного момента в таблице стилей в будущее, если новое поведение не противоречит существующим практика в определенных отношениях. Вы можете прочитать текущие требования, как говоря, что использование правила @import в определенных точках как-то Резерв рабочей группы для последующего использования, когда он находит использование, которое более ценным для авторов, чем возможность использовать его с обычным смысл прямо сейчас. Придание ему конкретного значения теперь вероятно, удалите этот параметр, так что это может быть потерей в долгосрочной перспективе.

Также они говорят, что сам @import уменьшает скорость загрузки (этот слабый аргумент, поскольку он не имеет значения, где размещается @import - перед правилами свойств или после них, но прежний разрешен).

Таким образом, мы вынуждены использовать обходной путь, например, использовать одну таблицу стилей "TOC", которая содержит только @imports в нужном порядке (но это увеличивает количество файлов, которые браузер должен загружать).

Ответ 4

Используйте !important для предотвращения переопределения

Что-то вроде этого

<style>
.el{color:red !important;}
.el{color:blue;}
</style>

Цвет останется красным.