Узнайте, как работать со скомпилированными файлами препроцессора CSS в Dreamweaver.

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

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

Dreamweaver поддерживает самые популярные препроцессоры CSS: Sass и Less. Кроме того, приложение Dreamweaver поддерживает платформы Compass и Bourbon для компиляции файлов Sass.

В основе Less лежит JavaScript, а Sass создан на основе Ruby, но от вас не требуется знания этих языков, как и нет никакой необходимости в использовании командной строки для компиляции файлов в CSS. Dreamweaver автоматически компилирует эти файлы в CSS при их загрузке, изменении и сохранении с помощью JavaScript-библиотеки less.js.

Как Dreamweaver обрабатывает препроцессоры CSS

Обработка препроцессоров CSS в Dreamweaver варьируется в зависимости от того, был ли определен сайт. Adobe рекомендует задавать сайт, поскольку его наличие позволяет свободно настраивать параметры препроцессора CSS, а также использовать в Dreamweaver платформы Compass и Bourbon. 

Можно настраивать параметры функционирования препроцессоров CSS в Dreamweaver, если задан сайт, настроив привязанные к конкретному сайту параметры препроцессора CSS.

Настройка параметров препроцессора CSS для конкретного сайта позволяет задавать параметры компилятора для каждого сайта. Можно также настроить расположение файлов Sass и CSS, а также параметров препроцессора для каждого конкретного сайта.

Кроме того, в Dreamweaver можно использовать Sass-платформы Compass, Bourbon, Bourbon Neat и Bourbon Bitters, если указан сайт.

В случае отсутствия указанного сайта доступна ручная компиляция файлов Sass и Less. Однако поддержка платформ Compass и Bourbon отсутствует.

Использование препроцессоров CSS в Dreamweaver

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

  1. Задайте сайт в Dreamweaver и убедитесь в том, что файл Sass или Less, который требуется скомпилировать, находится в корневой папке сайта. Если сайт уже задан и файл Sass/Less находится в его корневой папке, перейдите к следующему шагу. Дополнительные сведения о настройке сайта Dreamweaver см. в разделе О сайтах Dreamweaver.
  2. Задайте параметры для препроцессоров CSS (например, определение расположения созданных файлов CSS). Эти параметры относятся к конкретному сайту. Дополнительные сведения см. в разделе Настройка параметров препроцессора CSS для конкретного сайта.
  3. Если требуется использовать определенные платформы, например Compass или Bourbon, для них можно задать параметры. Дополнительные сведения см. в разделе Использование платформы Compass или Использование платформы Bourbon.
  4. Автоматически или вручную скомпилируйте ваши файлы Sass и Less. Дополнительные сведения см. в разделе Компиляция файлов препроцессора CSS.

Настройка параметров для препроцессоров CSS

В диалоговом окне «Управление сайтами», открываемом из меню «Сайты», можно задавать параметры для препроцессоров CSS.

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

Установка общих настроек препроцессора CSS

В диалоговом окне «Препроцессоры CSS», доступном при выборе меню «Сайты» > «Управление сайтами», можно настраивать следующие основные параметры препроцессора CSS. 

Общие настройки препроцессора CSS
Общие настройки препроцессора CSS

Включить автокомпиляцию при сохранении файла

Установите этот флажок для включения автокомпиляции препроцессоров CSS. Если выбран этот параметр, Dreamweaver автоматически создает файл CSS при сохранении файла Sass, Less или SCSS. Если этот параметр не выбран, необходимо вручную компилировать файлы каждый раз, когда вносится изменение.

Параметры Less

Включить строгий подсчет

Обрабатывает только вычисления в круглых скобках. Например, операция «(100px/25px)» будет обработана успешно, а «20% + 10%» (без скобок) не обработается. Если этот параметр отключен, обрабатываются все математические вычисления в файле.

Включить строгие единицы измерения

Выводит предполагаемую единицу измерения в CSS после вычисления. Например, «5px * 2px» компилируется как «10px», а не «10px2». 

Если этот параметр отключен, то при математических вычислениях Less будет пытаться определить единицу измерения выходного значения.

В этом примере стиль CSS создан следующим образом:

.class {
  property: 1px * 2px;
}

В данном случае предположение ошибочное, так как результатом умножения длины на длину является площадь, но CSS не позволяет описывать площади. Здесь предполагается, что одно из значений пользователя является значением, а не единицей длины, и поэтому Dreamweaver выводит 10px.

Этот созданный CSS-код считается ошибочным, если включены строгие единицы измерения.

Перезаписать URL-адреса как относительные

Перезаписывает URL-адреса в импортированных файлах таким образом, чтобы они всегда были относительными к базовому импортируемому файлу. Поэтому если файл Less импортирует другой файл Less, который, в свою очередь, ссылается на изображение, в скомпилированном CSS-коде отображается относительный URL-адрес.

Создать сопоставление исходного кода

Создает сопоставление исходного кода (файл, который заполняет пробел между высокоуровневыми языками, например Sass и Less, а также низкоуровневым языком, который они компилируют, например CSS).

Параметры Sass/SCSS

Стиль выходного файла

Задает стиль выходного файла CSS:

  • Вложенный — форматирует скомпилированный CSS-код в привычную модульную структуру.
  • Компактный — форматирует скомпилированный CSS-код в компактную структуру, которая занимает меньше места, чем «Вложенный» или «Расширенный» стиль.
  • Сжатый — выводит CSS в виде простой структуры.
  • Расширенный — выводит CSS в развернутом виде, где каждое свойство и правило находятся в отдельной строке. Свойства в пределах правила выделяются отступами, но сами правила никак не выделяются. 

Создание комментариев для исходного кода

Создает комментарии в выходном файле CSS, которые сопоставляют код CSS со строками, из которых он был создан.

Создать сопоставление исходного кода

Создает сопоставление исходного кода (файл, который заполняет пробел между высокоуровневыми языками, например Sass и Less, а также низкоуровневым языком, который они компилируют, например CSS). 

Настройка параметров исходных и выходных данных для CSS

Можно указать место для сохранения созданных файлов CSS, которое отслеживается в Dreamweaver, чтобы запускать автокомпиляцию, когда файлы Sass/Less по этому пути изменяются во внешнем редакторе.

Настройка исходных и выходных данных препроцессора CSS
Настройка исходных и выходных данных препроцессора CSS

В диалоговом окне «Управление сайтами», открываемом из меню «Сайты», можно настраивать следующие параметры исходных и выходных данных препроцессора CSS.

Выходной файл CSS

Укажите расположение созданного выходного файла CSS.

В той же папке, что и исходные файлы

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

Указать выходную папку

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

Заменить часть входного пути

Этот параметр позволяет заменить часть пути с помощью строковых типов «From» и «To».

Например, если задано значение «scss» для «From» и «css» для «To» (что приведет к замене «SCSS» на «css» в имени пути), то после этой замены выходной файл будет помещен в той же древовидной структуре.

Исходная папка

Укажите подпапку в корне сайта, изменения в которой требуется отслеживать. Как правило, в данной подпапке находятся все файлы SCSS или LESS. 

Если включен параметр для компиляции в разделе Общие настройки, то Dreamweaver автоматически запустит препроцессор CSS, когда какой-либо файл в этой папке будет изменен с помощью внешней программы или в Dreamweaver.

Использование платформы Compass

Compass — платформа для собственной разработки CSS. Она имеет открытый исходный код и позволяет создавать таблицы стилей CSS3 с помощью Sass.

Dreamweaver поддерживает Compass. Поэтому, если таблицы стилей создаются с помощью Compass, то компилировать их и создавать файлы CSS можно непосредственно в Dreamweaver.

  1. Установка файлов Compass.

    Если платформа Compass еще не установлена, то ее можно установить непосредственно из Dreamweaver.

    В диалоговом окне «Настройка сайта» выберите «Compass» в категории «Препроцессоры CSS». Выберите «Использовать Compass», затем нажмите кнопку «Установить файлы».

    Установка файлов Compass
    Установка файлов Compass

    Все файлы Compass и файлы конфигурации (*.rb) устанавливаются непосредственно в папку сайта. Их можно найти на панели «Файлы».

    Установленные файлы Compass
    Установленные файлы Compass

  2. Указание существующего файла конфигурации на основе Ruby

    Если на ваших компьютерах уже есть Compass и настроен файл конфигурации (*.rb), укажите в диалоговом окне Dreamweaver «Настройка сайта» путь к этому файлу в пределах корня текущего сайта.

    1. В диалоговом окне «Настройка сайта» выберите «Compass» в категории «Препроцессоры CSS».
    2. Установите флажок «Использовать Compass».
    3. Щелкните указанный файл конфигурации на основе Ruby и перейдите к его расположению. По окончании нажмите кнопку «Сохранить».
    Указание существующего файла конфигурации на основе Ruby
    Указание существующего файла конфигурации на основе Ruby

    Примечание.

    Этот файл должен находиться в корневой папке сайта.

  3. Указание параметров конфигурации вручную

    При отсутствии существующего файла с параметрами конфигурации их можно указать вручную.

    1. В диалоговом окне «Настройка сайта» выберите «Compass» в категории «Препроцессоры CSS».
    2. Установите флажок «Использовать Compass».
    3. Выберите ручное указание параметров конфигурации. Укажите следующие параметры конфигурации и нажмите кнопку «Сохранить».

    Следующие поля заполняются автоматически, но вы можете изменить их в соответствии со своими потребностями:

    Примечание.

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

    HTTP-путь

    Путь к проекту при запуске на веб-сервере. по умолчанию используется значение «/».

    Каталог изображений

    Каталог сохранения изображений. Соответствует значению «project_path» (путь к проекту).

    Каталог созданных изображений

    Каталог для сохранения созданных изображений. Соответствует значению «project_path» (путь к проекту). По умолчанию используется значение «images_dir».

    Каталог шрифтов

    Каталог сохранения файлов шрифтов.

    Относительные ресурсы

    Указывает, следует ли вспомогательным функциям Compass генерировать относительные URL-адреса от созданных CSS к ресурсам, используя http-путь для этого типа ресурсов.

  4. Если в диалоговом окне «Сайты» > «Управление сайтами» > «Препроцессоры CSS» выбран параметр «Включить автокомпиляцию при сохранении файла», Dreamweaver создает файл CSS при каждом сохранении изменений в файлах Sass. Кроме того, можно предварительно просмотреть эти изменения в режиме реального времени в окне браузера. Дополнительные сведения о предварительном просмотре изменений в режиме реального времени в браузере см. в разделе Просмотр в реальном времени.

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

    • Щелкните правой кнопкой мыши файл Sass, Less или SCSS на панели «Файлы» и выберите команду «Скомпилировать». 
    • Выберите команду «Скомпилировать» в меню «Инструменты», чтобы скомпилировать текущий файл.
  5. Затем можно присоединить скомпилированный файл CSS к файлам HTML на сайте. Дополнительные сведения см. в разделе Связывание с внешней таблицей стилей CSS.

Использование платформы Bourbon

Dreamweaver поддерживает семейство продуктов Bourbon. Поэтому, если таблицы стилей создаются с помощью Bourbon, то компилировать их и создавать файлы CSS можно непосредственно в Dreamweaver.

Поддерживаются следующие версии Bourbon:

  • Bourbon — это простая и небольшая библиотека смешанного типа для Sass
  • Bourbon Neat — это небольшая модульная платформа для Sass и Bourbon
  • Bourbon Bitters — это стили, переменные и структура Scaffold для проектов на основе Bourbon

Можно импортировать платформу Bourbon, добавив одну из следующих строк в код:

  • @import "bourbon" — для импорта Bourbon
  • @import "neat" — для импорта Bourbon Neat
  • @import "base" — для импорта Bourbon Bitter

После этого Dreamweaver использует предварительно собранную версию Bourbon для компиляции файлов препроцессора.

Или же установите файлы платформы Bourbon на своем сайте, чтобы дальнейшие обновления Dreamweaver не сказывались на компиляции. Файлы Bourbon будут скопированы на ваш сайт и именно эта платформа в дальнейшем будет использоваться для компиляции, вызванной для любых импортирующих его файлов.

Установка файлов Bourbon, Bourbon Neat или Bourbon Bitters

Для установки Bourbon или любой его версии:

  1. В диалоговом окне «Настройка сайта» выберите «Bourbon», «Bourbon Neat» или «Bourbon Bitters» в категории «Препроцессоры CSS».

  2. Нажмите кнопку «Установить файлы» для установки файлов в заданную папку, которая расположена в корне вашего сайта.

    Установка файлов Bourbon
    Установка файлов Bourbon

    Все файлы Bourbon устанавливаются непосредственно в папку сайта. Их можно найти на панели «Файлы».

    Установленные файлы Bourbon
    Установленные файлы Bourbon

    В случае сбоя на панели вывода отображаются ошибки («Окно» > «Результаты» > «Выходные данные»), а значок на панели задач становится красным.

Компиляция файлов препроцессора CSS

Файлы препроцессора CSS можно скомпилировать одним из следующих способов:

Настроить автокомпиляцию файлов препроцессора CSS

В Dreamweaver можно настроить параметры запуска автокомпиляции для измененных файлов Sass или Less в соответствующий им формат CSS. Можно также указать место (в корне сайта), в котором будут сохраняться созданные файлы CSS.

  1. В диалоговом окне «Настройка сайта» выберите параметр «Включить автокомпиляцию при сохранении файла» в категории «Препроцессоры CSS» > «Общие».

    Включение автокомпиляции
    Включение автокомпиляции

  2. В диалоговом окне «Настройка сайта» выберите «Исходные и выходные данные» в категории «Препроцессоры CSS».

  3. В диалоговом окне «Исходные и выходные данные» укажите место для сохранения созданных файлов CSS. Можно выбрать один из следующих параметров:

    В той же папке, что и исходные файлы

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

    Указать выходную папку

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

    Заменить часть входного пути

    Этот параметр позволяет заменить часть пути с помощью строковых типов «From» и «To».

  4. Укажите папку с файлами Sass или Less, изменения в которой требуется отслеживать со стороны Dreamweaver. 

    При изменении и последующем сохранении каких-либо файлов в этой папке Dreamweaver автоматически скомпилирует их. 

    Настройка исходных и выходных данных препроцессора CSS
    Настройка исходных и выходных данных препроцессора CSS

    Примечание.

    Dreamweaver отслеживает эти файлы и компилирует их, даже если изменения вносились в сторонней программе (например, текстовом редакторе), а не в Dreamweaver.

После успешной компиляции на панели вывода отображается соответствующее сообщение («Окно» > «Результаты» > «Выходные данные»), а значок состояния в строке состояния становится зеленым <icon>. Дважды щелкните сообщение об успешном завершении компиляции на панели, чтобы открыть скомпилированный файл CSS.

При наличии каких-либо ошибок код CSS не будет успешно скомпилирован. Значок состояния отображается красным <icon>, а все ошибки и предупреждения будут показаны на панели вывода. Можно дважды щелкнуть сообщение об ошибке на панели, чтобы быстро перейти к строке кода с этой ошибкой. Файл CSS не скомпилируется успешно, пока не будут устранены все ошибки.

Примечание.

Панель вывода обычно закреплена в нижней части рабочей среды. Если панель закрыта, ее можно открыть, выбрав «Окно» > «Панель вывода».

Также можно отображать и скрывать панель вывода, используя значок состояния (если он красного цвета).

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

Дополнительные сведения о создании ссылки на таблицу стилей для вашей веб-страницы см. в разделе Создание ссылки на внешнюю таблицу стилей CSS.

Ручная компиляция файла препроцессора CSS

В некоторых случаях (например, если не определен сайт Dreamweaver) может потребоваться ручная компиляция файла препроцессора CSS.

В подобных ситуациях необходимо в диалоговом окне «Настройка сайта» отключить параметр «Включить автокомпиляцию при сохранении файла» в категории «Препроцессоры CSS» > «Общие».

Чтобы вручную скомпилировать препроцессор CSS, щелкните правой кнопкой мыши файл на панели «Файлы» и выберите команду «Скомпилировать».

Ручная компиляция файлов препроцессора CSS через панель «Файлы»
Ручная компиляция файлов препроцессора CSS через панель «Файлы»

Также можно выбрать команду «Скомпилировать» в меню «Инструменты», чтобы скомпилировать текущий файл.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет