Search Меню
Горячий старт на просторы интернета
Лунная База в соц.сетяхСети

SCSS и Sass в Joomla 4

Информация о материале
Родительская категория: CMS — движки сайтов
Категория: Joomla 4

SCSS и Sass в Joomla 4

  1. Где вы можете найти таблицы стилей и компилятор .scss для использования в Joomla 4?
  2. Предварительные условия
  3. Установите зависимости (пакеты)
  4. Как заново сгенерировать таблицы стилей CSS в Joomla 4
    1. Все файлы scss ядра Joomla 4
    2. Все файлы в одном каталоге
    3. Один специальный файл
  5. Компиляция собственных файлов SCSS для вашего шаблона Joomla 4
  6. Разница CSS, SCSS и Sass
    1. CSS
    2. Sass
      1. SCSS
      2. Sass
  7. Из существующего CSS в SCSS / импорт CSS-файлов
    1. Импортируйте файлы .css в формате .scss для вашего шаблона Joomla 4


Большинство таблиц стилей по умолчанию Joomla 4.x написаны с использованием SCSS, а затем скомпилированы для создания CSS-файлов.

Где вы можете найти таблицы стилей и компилятор .scss для использования в Joomla 4?

Файлы ядра .scss находятся в разных каталогах. В частности, вот эти файлыː

  • templates/cassiopeia/scss/template.scss
  • administrator/templates/atum/scss/bootstrap.scss
  • administrator/templates/atum/scss/font-awesome.scss
  • administrator/templates/atum/scss/template.scss
  • administrator/templates/atum/scss/template-rtl.scss
  • media/plg_installer_webinstaller/scss/client.scss

Сценарий генерации CSS, компилятор SCSS и другие аналогичные инструменты сборки находятся в каталоге build/ исходного кода Joomla 4, расположенного на GitHub. Обратитесь к Git for Coders для получения дополнительной информации об использовании GitHub. Каталог сборки доступен только из исходного кода Joomla, он не включен в официальный релиз Joomla.

Предварительные условия

Для компиляции ваших собственных файлов SCSS с помощью ядра Joomla 4 требуется, чтобы на вашем локальном компьютере был установлен Node.js. Для установки Node.js, пожалуйста, зайдите на Node.js официальный веб-сайт, загрузите соответствующую настройку для своей операционной системы и установите ее, следуя мастеру установки. NPM (Менеджер пакетов узлов) используется для управления и настройки среды тестирования JavaScript.

Установите зависимости (пакеты)

Откройте командную строку и перейдите в корневой каталог Joomla 4.x.

Выполните команду npm install

$ npm install
...
added 1354 packages in 193.687s
$

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

Как заново сгенерировать таблицы стилей CSS в Joomla 4

Чтобы повторно сгенерировать все CSS-файлы из дистрибутива ядра Joomla, вам нужно будет выполнить сценарии генерации в качестве приложения CLI.

Все файлы scss ядра Joomla 4

Вы можете скомпилировать все основные css-файлы Joomla с помощью команды node build --compile css. Напримерː

$ node build --compile-css 
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.
Prefixing for:  last 1 version
template-rtl.css was updated.
Prefixing for:  last 1 version
font-awesome.css was updated.
Prefixing for:  last 1 version
client.css was updated.
Prefixing for:  last 1 version
bootstrap.css was updated.
Prefixing for:  last 1 version
template.css was updated.
$

Все файлы в одном каталоге

Вы можете скомпилировать все файлы в одном каталоге с помощью командной строки build --compile-css путь-к-каталогу. Например, node build --compile-css templates/cassiopeia/scss.

$ node build --compile-css templates/cassiopeia/scss
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.

Один специальный файл

Вы можете скомпилировать один файл с помощью команды node build --compile-css путь-к-файлу. Например, node build --compile-css templates/cassiopeia/scss/template.scss.

$ node build --compile-css templates/cassiopeia/scss/template.scss
Prefixing for:  last 1 version
Without `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
template.css was updated.

Примечание

  • Расширение файла .scss должно быть в нижнем регистре.
  • Файл css должен быть создан.

Компиляция собственных файлов SCSS для вашего шаблона Joomla 4

Чтобы скомпилировать файлы scss для вашего собственного шаблона, вам нужно будет сделать копию JOOMLA4/build/build-modules-js/compilecescss.js напишите сценарий и настройте его в соответствии с вашей средой.

В качестве альтернативы вы можете использовать плагин компилятора SCSS, который автоматически компилирует ваши файлы .scss при перезагрузке страницы. В каталоге расширений Joomla JED вы найдете плагин для этой целиː  Joomlaǃ Extension Directory.

Больше альтернатив и инструментов вы можете найти на http://sass-lang.com/install

Компилятор SCSS, используемый для ядра Joomla 4.x, является node-sass. В ядре Joomla вы можете найти его в каталоге JOOMLA4/node_modules/node-sass.

Разница CSS, SCSS и Sass

SCSS или Sass упрощает применение CSS и определяет переменные. Это обеспечивает более четкое представление, меньшее количество кода и более простую ревизию за счет использования переменных.

CSS

С помощью CSS мы пишем код, как показано ниже:

    #header {
      margin: 0;
      border: 1px solid blue;
    }
    #header p {
      font-size: 14px;
      color: blue;
    }
    #header a {
      text-decoration: none;
    }

Sass

Sass — это препроцессор CSS с улучшенным синтаксисом. Таблицы стилей в расширенном синтаксисе обрабатываются препроцессором и преобразуются в обычные таблицы стилей CSS.

Для SASS доступны два синтаксисаː  SCSS и Sass.

SCSS

SCSS используется в ядре Joomla. SCSS —  это расширение синтаксиса CSS.

    $color:    blue;
    #header {
      margin: 0;
      border: 1px solid $color;
      p {
        color: $colorRed;
        font: {
          size: 14px;
        }
      }
      a {
        text-decoration: none;
      }
    }

Sass

Более старый синтаксис Sass обеспечивает более лаконичный способ написания CSS.

    $color:    blue
    #header
      margin: 0
      border: 1px solid $color
      p
        color: $colorRed
        font:
          size: 14px
      a
        text-decoration: none

Вы можете найти дополнительную информацию в документации Sass.

Из существующего CSS в SCSS / импорт CSS-файлов

Возможно, вы захотите добавить существующие CSS-файлы и классы в свой шаблон Cassiopeia с поддержкой SCSS или начать с того, что у вас есть. Все объявления CSS совместимы с SCSS, поэтому вы можете просто переименовать свои файлы .css в .scss, скомпилировать и использовать их. Затем вы можете шаг за шагом использовать функции, которые может предложить SCSS:

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

Подробнее: https://sass-lang.com/

Обратите внимание: Если вы хотите настроить шаблон Cassiopeia, рекомендуется сделать копию шаблона и производить настройки уже в копии, чтобы обновления Joomla не перезаписывали ваши настройки.

Импортируйте файлы .css в формате .scss для вашего шаблона Joomla 4

Теперь давайте предположим, что вы хотите включить свои пользовательские файлы и проанализировать их компилятором SCSS — вам НЕ нужно переписывать файл .css в SCSS, потому что простой файл .css также работает. Единственное, что нужно сделать, это

  • чтобы переименовать ваши файлы .css в .scss и
  • добавить префикс _ и
  • оператор @import в вышеупомянутые основные templates/cassiopeia/scss/template.scss

Я предполагаю, что вы поместили свой пользовательский файл mystyles.css, переименованный в _mystyles.scss, в папку /templates/cassiopeia/scss. Теперь вы открываете /templates/cassiopeia/scss/template.scss и в нижней части файла ваш файл _mystyles.scss, чтобы он переопределял существующие объявления:

// Bootstrap functions
@import "../../../media/vendor/bootstrap/scss/functions";


// Variables
@import "variables";

// Flying Focus
@import "../../../media/vendor/flying-focus-a11y/scss/flying-focus";

// Bootstrap
@import "../../../media/vendor/bootstrap/scss/variables";
@import "../../../media/vendor/bootstrap/scss/bootstrap";

// FontAwesome
@import "../../../media/vendor/font-awesome/scss/font-awesome";

// B/C for Icomoon
@import "../../../media/system/scss/icomoon";

// Alert
@import "../../../media/system/scss/jalert";

// Blocks
@import "blocks/global"; // Leave this first
@import "blocks/alerts";
@import "blocks/banner";
@import "blocks/demo-styling";
@import "blocks/footer";
@import "blocks/form";
@import "blocks/frontend-edit";
@import "blocks/header";
@import "blocks/icons";
@import "blocks/iframe";
@import "blocks/layout";
@import "blocks/modals";
@import "blocks/modifiers";
@import "blocks/utilities";
@import "blocks/css-grid"; // Last to allow fallback

// Vendor overrides
@import "vendor/awesomplete";
@import "vendor/bootstrap/buttons";
@import "vendor/bootstrap/card";
@import "vendor/bootstrap/custom-forms";
@import "vendor/bootstrap/collapse";
@import "vendor/bootstrap/dropdown";
@import "vendor/bootstrap/lists";
@import "vendor/bootstrap/modal";
@import "vendor/bootstrap/nav";
@import "vendor/bootstrap/pagination";
@import "vendor/bootstrap/table";
@import "vendor/chosen";
@import "vendor/dragula";
@import "vendor/minicolors";
@import "vendor/tinymce";

@import "mystyles";

Если вы теперь скомпилируете свой основной файл template.scss, вы получите один основной template.css, оптимизированный и минифицированный. Вы также сократили количество http-запросов, и сайт должен загружаться быстрее.

Перевод с английского официальной документации Joomla 4:
https://docs.joomla.org/J4.x:SCSS_and_Sass

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Старт! Горячий старт на просторы интернета
Основное меню
Старт! Горячий старт на просторы интернета
Лунная База в соц.сетях
ссылка на YouTube ВКонтакте telegram dzen RuTube ссылка на LiveInternet ссылка на blogspot
Старт! Меню