Как включить все CSS, хранящиеся в каталоге?

Ответ 1

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

Это не решает проблему ручного включения каждого отдельного файла css, но, по крайней мере, он инкапсулирует его в мастер-таблицу стилей, поэтому вам не нужно повторять все ссылки в каждом html файле. Если вы добавите дополнительные файлы css, вам нужно будет добавить ссылку в master css, и все страницы получат доступ к ней.

Пример ссылки HTML CSS:

<link href="master.css" type="text/css" />

Пример Мастер CSS (master.css):

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

Подробнее о когда использовать @import и совместимость с более старыми браузерами.

Ответ 2

Вам нужно будет сделать это на стороне сервера. Если вы используете PHP, посмотрите на glob.

Например:

foreach (glob("path/to/css/*.css") as $css) {
    echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}

Ответ 3

Невозможно использовать подстановочные знаки в href. Вам нужно будет указать тег ссылки для каждого файла css, который вам нужно включить.

Ответ 4

Вы можете написать серверную часть script, которая объединяет все файлы в каталоге и отправляет ее клиенту, а затем помещает script в тег <link>.

Однако будьте осторожны с синтаксическими ошибками.

Ответ 5

Невозможно сделать это на стороне клиента. Это можно сделать с помощью технологии на стороне сервера. Но наилучшим подходом было бы включить все CSS в один файл и включить это.
Если вы все еще хотите, чтобы css был разбит на файлы, сделайте то, что многие делают, и используйте инструмент построения, который включает все css в один файл только для сервера производства/тестирования.

Ответ 6

вы можете использовать php для отображения всего файла с расширением css в этом каталоге...

$fp = opendir($dir);
while ($file = readdir($fp)) {
        if (strpos($file, '.css',1))
            $results[] = $file;
    }
closedir($fp);

... и чем сделать конструкцию foreach, чтобы указать css

Ответ 7

Если я не ошибаюсь, это можно сделать довольно красиво (хотя и вручную), как в JavaScript.

./styles/
   ./layouts/
      all.css      <-- Each subfolder has this
      header.css
      footer.css
      nav.css
   ./main.css      <-- Main CSS file

Внутри ./styles/layouts/all.css вы импортируете:

@import 'layouts/header.css';
@import 'layouts/footer.css';
@import 'layouts/nav.css';

Правильно, это отделяет второстепенную логику в CSS-организации (что хорошо ИМХО).

Затем, как много файлов "all.css" в подпапках, просто включите их (пример):

main.css

@import 'variables/all.css';
@import 'layouts/all.css';

Я думаю, это довольно мило...

Ответ 8

Могут быть некоторые возможные обходные пути:

• Рассмотрим идею импорта страницы PHP (например./tabs_css/allcss.php), которая объединяет и возвращает все css в каталоге. Это может быть немного интенсивным CPU.

• Рассмотрите возможность создания комбо файла css, который является конкатенацией всех ваших файлов CSS. Это можно было бы создать автоматически, добавив специальные крючки в вашу систему контроля версий.