Как подключить один css файл в другой css файл
Перейти к содержимому

Как подключить один css файл в другой css файл

  • автор:

Директива @import

Sass расширяет CSS правило 1 @import , позволяя импортировать scss и sass файлы. Все импортированные scss и sass файлы могут быть объединены в одном результирующем css файле. Кроме того, любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключ —load-path в командной строке.

@import использует название файла для импорта. По умолчанию, @import ищет Sass-файлы, но есть несколько правил, по которым @import отрабатывает как CSS-правило:

  • Если расширение файла .css
  • Если имя файла начинается с http://
  • Если имя файла вызывается через url()
  • Если правило @import включает в себя любые медиа-запросы

Если ни одно из вышеперечисленных условий не соблюдено, а расширение файлов .scss или .sass, то эти файлы будут импортированы. Если расширения файлов не указаны, то Sass попытается найти файлы по имени с расширением .scss или .sass и импортирует их. Например:

@import "foo.scss"; // или @import "foo"; 
@import foo.sass // или @import foo 

будет импортирован файл foo, в то время как:

@import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 
@import "foo.css" @import "foo" screen @import "http://foo.com/bar" @import url(foo) 
@import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 

Также возможно импортирование нескольких файлов через одну директиву.

@import "rounded-corners", "text-shadow"; 
@import rounded-corners, text-shadow 

Будут импортированы файлы rounded-corners.scss и text-shadow.scss.

Импортирование может содержать в себе интерполяцию #<> , но только с некоторыми ограничениями. Невозможно динамически импортировать файлы Sass через переменные; интерполяция нужна только для правила @import в CSS. Как таковая, интерполяция работает только с url().

$family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=#"); 
$family: unquote("Droid+Sans") @import url("http://fonts.googleapis.com/css?family=#") 
@import url("http://fonts.googleapis.com/css?family=Droid+Sans"); 

1 Правилом является только функционал с возможностями CSS, директива — функционал правила CSS + расширение функционалом Sass.

Один CSS файл или несколько на сайт?

Выгуглить нормально не смог. Как делаете вы? Нашел несколько вариантов:
1. Для каждой страницы по CSS.
2. Для каждой страницы по CSS, но к каждой странице подключается не он, а сборщик, который их сливает. Какие есть сборщики? Насколько удобно их использовать?
3. Один CSS на все страницы. Через что оптимизировать? После оптимизации насколько удобно такой код поддерживать?
4. Один CSS для общих стилей (для хедера и футера, модальных окон и тэдэ), для специфического содержания еще один CSS файл — итого два.
Еще кто-то писал про препроцессоры — чем они могут помочь? Какие еще есть варианты?
Не знаю как лучше сделать.

  • Вопрос задан более трёх лет назад
  • 3642 просмотра

2 комментария

Простой 2 комментария

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

Выгуглить нормально не смог.

Ну хоть врать-то не надо. Просто скажи «мне лень гуглить, раскажите в тысячный раз, как нужно делать».

Решения вопроса 0
Ответы на вопрос 8

Serj-One

i’m sexy and i know it

В исходниках для удобства отдельные файлы для страниц, секций, блоков или даже элементов.
На выходе 1 общий минифицированный и оптимизированный файл на все страницы.

По файлу на каждую страницу — полный бред. Псевдооптимизация, не дающая значимого прироста в скорости загрузки.

Ответ написан более трёх лет назад
Нравится 5 3 комментария
Teo Mart @Teodor_Draizer Автор вопроса
А чем сливать файлы? Препроцессором типа sass?

Serj-One

Teo Mart, да, импорт всех файлов в один главный, и его автокомпиляция при изменении любого.
Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Один общий файл инвалидиируется в кеше при каждом чихе и клиенту нужно заново качать всё. Это значительно влияет на скорость загрузки и не является псевдооптимизацией.

Как по мне, наиболее предпочтительным является использование одного css-файла. Почему? Во-первых, 1 файл = 1 http-запрос к серверу (чем меньше запросов, тем быстрее грузится страница). Во-вторых, при первом посещении сайта css-файл закешируется, и при переходе на другие страницы, раз этот файл общий для всех, не придётся грузить никакие стили. В-третьих, меньше мороки с тем, куда какие файлы подключать.
Ну и напоследок, если вы интересуетесь оптимизацией загрузки веб-страниц, то посмотрите в сторону critical css — когда стили первого экрана (то есть той секции, которая возникает перед глазами пользователя сразу при загрузке) выносятся непосредственно в html-разметку, способствуя более быстрой отрисовке веб-страницы.

P.S. На этапе разработки стили, относящиеся к конкретной секции/странице, для удобства лучше держать в отдельных файлах (тут на помощь приходят препроцессоры либо postcss), а затем для продакшена собирать их с помощью сборщика в единый css.

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Programmir @Programmir

Тоже использую один файл. Просто комментирую блоки. Зачем использовать несколько файлов мне непонятно.

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Как делаете вы?

Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
Если настроено HTTP/2, то последний файл можно заменить россыпью файлов каждого блока со страницы. Но нужно замерить производительность такого подхода в каждом конкретном случае.

к каждой странице подключается . сборщик, который их сливает

Какой ещё такой сборщик?

Через что оптимизировать?

Через что хотите.

После оптимизации насколько удобно такой код поддерживать?

Поддерживаете вы неминимизированные исходники, поэтому настолько же, насколько и до.

Sass: директива @import

Один из способов создания DRY-кода заключается в разделении основных задач и сохранении его в отдельных файлах:

Можно использовать директиву CSS import , чтобы включить содержимое одного файла в другой.

Обновлено: 2021-09-17 15:23:19 Вадим Дворников автор материала

Правило CSS @import

Директива @import является правилом CSS , которое какое-то время было очень популярным, прежде чем попало в немилость разработчиков из-за проблем с производительностью.

С помощью @import можно подключать CSS внутри других стилей. При этом подключаемые файлы могут либо располагаться на одном сервере или на другом:

@import "style.css"; @import "css/style.css"; @import url("http://domain.com/css/styles.css");

Это позволило импортировать CSS в другие файлы, но данная практика стала редко использоваться из-за снижения производительности. Но Sass устраняет все проблемы, так как операторы @import удаляются из кода Sass при компиляции в CSS .

Директива @import в Sass

Sass расширяет правило CSS @import , чтобы оно работало с файлами .scss и .sass . Он импортирует файл по ссылке. При этом все переменные или примеси, определенные в импортируемом файле, могут быть использованы в основном файле:

@import "typography.scss";

Если в текущем каталоге существует файл typography.scss , его содержимое заменит оператор @import .

Sass import CSS делает все еще проще. Если вы забыли включить расширение, то компилятор будет искать файл с таким же именем и расширением .scss или .sass :

@import "typography";

Приведенный выше код будет искать файл typography.scss или typography.sass в той же папке, где находится файл, в который импортируются стили.

По умолчанию Sass будет включать содержимое импортируемого файла вместо оператора @import . Но бывают случаи, когда Sass компилирует правило @import . Тогда вы получите в файле .css @import вместо кода файла, указанного в правиле. Sass компилирует @import , если:

  • Расширение файла — .css ;
  • Имя файла начинается с HTTP://; ;
  • Имя файла — URL() ;
  • @import содержит медиа-запросы.

Если вы исключите перечисленные выше условия, в CSS будет импортировано содержимое указанного файла.

Вы не ограничены использованием только одного правила CSS import . Можно использовать столько операторов, сколько захотите. Например, импортируя три различных файла, мы импортируем их содержимое том же порядке, в котором они перечислены:

@import "typography.scss"; @import "color.scss"; @import "layout.scss";

Но можно импортировать несколько файлов в одном операторе @import :

@import "typography.scss", "color.scss", "layout.scss";

Все три файла будут импортированы в указанном порядке.

Партиалы

Sass компилирует все файлы .scss или .sass внутри каталога, который он просматривает. Но если нужно импортировать файл, не обязательно компилировать его.

Если добавить в начале имени файла подчеркивание, Sass не будет его компилировать. Если вы не хотите, чтобы файл color.scss компилировался в color.css , то назовите файл _color.scss . В Sass такие файлы называются партиалами.

Можно пропустить подчеркивание при ссылке на файл внутри правила @import . Так же можно пропустить расширение:

@import "color";

Sass import CSS понимает, что нужно импортировать файл _color.scss ( или _color.sass ) из текущего каталога, если он существует.

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

Вложенные директивы @import

Также можно вложить @import в другое правило Sass , подобно тому, как вкладываются директивы @media .
Например, вы создаете партиал с именем _nav-bkgd.scss , который содержит только фоновый цвет элементов навигации:

Можно импортировать файл-партиал непосредственно внутри блока кода всех стилей меню навигации. Скажем, внутри класса с именем .global-nav :

.global-nav

Если оба файла находятся в одной папке, будет компилирован следующий код:

.global-nav li

Нельзя импортировать таким образом все. Например, такие директивы, как @mixin и @charset , размещение которых допускается только на базовом уровне документа, не могут содержаться внутри CSS import .

Структура файлов и папок с помощью @import и партиалов

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

Я использовал эту структуру папок при создании небольшого сайта несколько лет назад. Мой каталог .scss содержал три папки ( modules , partials и vendor ), каждая с одним или несколькими файлами. Также у меня был один файл верхнего уровня, main.scss :

Структура файлов и папок с помощью @import и партиалов

В папке vendor содержатся коды, получаемые из сторонних источников. В моем примере есть файл под названием _ico-moon.scss от поставщика Ico Moon.

Папка partials включает в себя код, который будет импортирован в другой файл, а затем скомпилирован с остальной частью кода в этом файле. В папке partials содержатся некоторые общие стили ( в файле _base.scss ) и стили отдельных элементов навигации ( в файле _navigation.scss ). Я хочу подключить CSS import , импортировать их и скомпилировать.

Формально файлы во всех трех папках являются партиалами, но partials — имя, назначенное этой папке в структуре. Вы можете изменить имя папки в своем проекте на другое, если это сбивает вас с толку. Главное, что эти файлы содержат код, который будет включен в другой файл, а затем скомпилирован с этим файлом.

Папка modules включает в себя код, который не будет скомпилирован. Она содержит такие компоненты, как примеси, функции и переменные. В моем случае, это два файла _color.scss и _typography.scss . Они содержат переменные и ничего больше.

Я использовал файлы переменных, чтобы быстро показать клиенту имеющиеся варианты дизайна. Вместо одного файла _color.scss , у меня были _color-red.scss , _color-green.scss , _color-blue.scss , в цветовой гамме которых доминировал один конкретный цвет. Так я мог быстро показать цветовые вариации дизайна.

Что касается импорта файлов, за это отвечал файл main.scss . В самом начале файла размещалась серия операторов Sass import CSS :

• @import “modules/color”; • @import “modules/typography”; • @import “partials/base”; • @import “partials/navigation”; • @import “vendor/ico-moon”;

Все файлы технически являются партиалами, поэтому не нужно включать подчеркивание или расширение файла при обращении к нему в операторе.

Мысли напоследок

Правило @import — это одно из правил CSS , которые ранее не рекомендовали использовать. Но все проблемы, связанные с ним, решаются с помощью Sass .

Можно сделать свой код более простым в обслуживании и поддержке, используя CSS import и разбивая большие файлы на более мелкие. Они импортируются в другие файлы, а затем сводятся в одном файле верхнего уровня, который компилируется в CSS .

Вадим Дворников автор-переводчик статьи « Sass: The @import Directive »

Как подключить CSS к HTML

Каскадные таблицы стилей — это неотъемлемая часть современного web-сайта. Поэтому, вебмастер обязан знать как подключить CSS к документу HTML.

Ниже подготовлено 4 наиболее известных способа, которые помогут понять принцип правильного добавления стилей.

  • Как подключить внешние стили из файла «CSS»;
  • Подключение стилей через тег «Style»;
  • Подключение встроенной таблицы стилей;
  • Как подключить один css в другой css файл.

Как подключить внешние стили из файла «CSS»

На моем сайте насчитывается порядка 5 000 строчек стилей. Грузить такой объем при формировании каждой страницы, не правильно. К тому же, этот процесс ресурсозатратен, что, безусловно, скажется на скорости открытия сайта.

Вероятно думаете: «А как правильно подключать стили?» Все очень просто, таблицу стилей следует подключать из внешнего файла CSS.

Файл со стилями, имеет расширение .css . Его, конечно, можно размещать в любом месте на ftp, но обычно, подобные файлы помещают в папку «CSS», расположенную внутри файлов шаблона.

В какой папке хранятся стили CSS

Чтобы подключить внешний файл CSS, нужно в коде сайта, между тегами «head», добавить строчку:

где «style.css» — это имя подключаемой таблицы, а «css», папка в которой находятся эти стили.

Приведу простой пример, стандартной страницы web-документа:

    Подключаем стили CSS из файла  . 

Важное добавление!! Атрибут href может принимать как абсолютный, так же и относительный путь к файлу.

Это означает, что две приведенные ниже строчки, будут абсолютно одинаково работать.

  1. Абсолютная ссылка. Явно указывает на расположение файла.
  1. Относительная ссылка. Сокращенный вариант.

Главный файл стилей, принять называть «style.css», но это не значит что других названий быть не должно. Придумывайте любое имя, но не забывайте, что оно должно быть на латинице.

Рассмотренный способ наиболее удобен, таким образом можно подключить не один, а сразу несколько таблиц стилей.

Подключение стилей через тег «Style»

Стили можно подключать непосредственно на странице web-сайта. Между тегами head, добавьте тег style. Внутри этого тега, можно применить стили к именно той странице, на которой они выводятся.

Практически это выглядит следующим образом:

То есть, все параграфы, должны иметь межстрочный интервал 2em. И это будет действовать на всех страница, на которых будут выводиться данные строчки.

    Как подключить таблицу стилей на странице p . 

Подключение встроенной таблицы стилей

Атрибут style, добавленный к определенному элементу разметки сайта, позволит подключить стили css только для этого элемента.

Покажу как это выглядит в тексте:

Подключаем встроенную таблицу стилей.

Стиль, будет применен только для данного блока div и раскрасит текст в заказанный цвет.

Этот способ отлично подходит при создании красивых таблиц в документе, как например вот эта.

Как подключить стили CSS в HTML

Как подключить один css в другой css файл

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

  1. Откроем файл «style.css».
  2. Добавим код @import url «/css/blt.css»; .
  3. Сохраняем изменения.

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

Кроме того, аналогичным способом, можно подключать внешние стили и в теге «Style». Будет выглядеть так:

    Как подключить один css в другой css @import url("/css/blt.css") p . 

Таким образом мы рассмотрели самые лучшие способы как подключить CSS к HTML. Если вы хотите добавить свой вариант, пишите его в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *