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

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

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

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

Dreamweaver использует встроенный компилятор Ruby-SaaS для компиляции файлов SCSS, LESS. Dreamweaver также поддерживает фреймворки Compass и Bourbon для компиляции файлов Sass. 

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

Поддерживаемые версии:

• Sass: 3.4.25
• LESS: 2.7.2
• Compass: 1.0.3
• Bourbon: 4.2.6
• Bourbon Neat: 1.7.3
• Bourbon Bitters: 1.2.0

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

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

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

Читайте далее, чтобы узнать, как использовать Dreamweaver с препроцессорами CSS:

Dreamweaver 2017 и препроцессоры CSS

В Dreamweaver 2017 поддержка препроцессора CSS встроена в Dreamweaver. Таким образом, можно работать с файлами Sass/LESS/SCSS внутри Dreamweaver. Сочетания клавиш Ctrl+S или Cmd+S позволяют автоматически компилировать CSS в Dreamweaver. Можно также вручную компилировать отдельные файлы CSS через Инструменты > Компилировать (или F9). Изменения также отражаются во всех открытых файлах HTML, где этот скомпилированный CSS связан или прикреплен.

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

• Установите соответствующий компилятор, если хотите использовать Compass или Bourbon из Dreamweaver. Эта установка выполняется в одно нажатие. Настройте ваши параметры препроцессора CSS.

Устанавливайте компилятор, только если хотите копировать файлы платформы (Bourbon) или если нужно создать стандартные файлы scss и файлы конфигурации на основе Ruby (Compass). Рекомендуется хранить копию файлов платформы. Если определенные примеси или функции из фреймворка разработки удалены в более поздних версиях, вы все еще можете получить доступ к файлам препроцессора в вашем сайте.

• Убедитесь, что включена автоматическая компиляция. Затем нажмите Сохранить для обновления файлов CSS.
• (Необязательно) Просмотрите изменения, отражающиеся в режиме Live view или предварительном просмотре в реальном времени во всех страницах HTML, где используется созданный css.

Dreamweaver 2015 и препроцессоры CSS

В Dreamweaver 2015 и более ранних версиях CC можно использовать файлы Sass, LESS, SCSS с Dreamweaver. Однако вам приходилось компилировать эти файлы самостоятельно вне приложения Dreamweaver.
Ваш технологический процесс будет напоминать следующие шаги:

1. Скачайте и установите компилятор.
2. Настройте задание grunt (Gruntfile.js) для компилятора, чтобы он мог читать ваш файл Sass/LESS/SCSS.
3. Настройте другое задание grunt для компиляции файла в CSS, который затем можно будет импортировать в Dreamweaver.

Эти шаги необходимо выполнять каждый раз при внесении изменений в файл Sass/LESS/SCSS.

В случае отсутствия указанного сайта доступна ручная компиляция файлов 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. По умолчанию эти настройки применяются к фреймворку Saas.

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

Параметры LESS

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

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

.class {

property: 1px * 2px;

}

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

При включенных строгих единицах Dreamweaver считает это ошибкой вычисления и выдает ошибку.

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

Создает сопоставление исходного кода. Карта источника — это файл, который связывает языки высокого уровня, такие как Sass и LESS, с языком низкого уровня, в который они компилируются, например CSS.

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

Определяет стиль выходного файла CSS:

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

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

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

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

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

Можно задать следующие настройки CSS препроцессора для источника и вывода в диалоговом окне Sites > Manage Sites.

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

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

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

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

Этот параметр позволяет заменить часть пути с помощью строк «From» и «To». Например, при настройке «Из: scss» и «В: css» выходной файл помещается в ту же древовидную структуру после замены SCSS в пути на css.

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

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

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

Compass — это открытая среда разработки CSS, которая позволяет cоздавать таблицы стилей CSS3 с использованием Sass.

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

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

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

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

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

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

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

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

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

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

Чтобы установить Bourbon или любую из его разновидностей:

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

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

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

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

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

После успешной компиляции в панели Вывод (Окно > Результаты > Вывод) отображается сообщение. Значок состояния в строке состояния отображается зеленым.Чтобы открыть скомпилированный CSS, дважды нажмите сообщение об успешном выполнении в панели.

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

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

Для получения дополнительной информации о связывании вашей веб-страницы с таблицей стилей см. Link to an external CSS style sheet.

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

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

В таких случаях отключите Enable Auto Compilation on File Save на панели CSS Preprocessors > General диалогового окна Site Setup.

Чтобы вручную скомпилировать препроцессор CSS, щелкните правой кнопкой мыши файл на панели Files и нажмите Compile.

Вы также можете нажать Tools > Compile, чтобы скомпилировать текущий файл.