Ungic packer - среда разработки веб верстальщика

# Проект

Расположение файлов проекта: source/scss/project.

Проект состоит из набора основных конфигурационных файлов и является ungic.project sass модулем.

Основные задачи проекта:

  • предоставление общего функционала при работе с компонентами,
  • создание общего стиля проекта,
  • переопределение конфигураций и стилей компонентов.

Структура проекта:

  • themes, обязательное присутствие темы по умолчанию - темы проекта.
  • config.scss, опциональный - конфигурационный файл
  • properties.scss, опциональный - CSS свойства для стилизации компонентов.
  • config-over.scss, опциональный - служит для переопределения конфигураций (config.scss) компонентов.
  • properties-over.scss, опциональный - служит для переопределения properties компонентов.

# Конфигурация проекта (config.scss)

Опциональный файл

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

TIP

Для получения доступа к конфигурации проекта из компонента, следует включить ungic.project модуль проекта и использовать config метод:

// project/config.scss
$available-theme-colors: (third, sumptuous); // Добавили доп. доступные цвета тем.
$grid-columns: 12;

// components/mygrid/render.scss
@use "ungic.project" as project;

@debug project.config(grid-columns); // 12

# CSS свойства (properties.scss)

Опциональный файл

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

# config-over.scss

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

$cid: null !default;
$config: () !default;

после чего, мы можем изменить входные данные отталкиваясь от CID компонента

// Изменяем исходные параметры конкретного helloworld компонента.
@if($cid == helloworld) {
    $config: map.merge($config, (param: 1));
}

тем самым, мы изменим конфигурацию helloworld компонента не затрагивая его файлы.

# properties-over.scss

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

$cid: null !default;
$properties: () !default;

после чего, мы можем изменить входные данные отталкиваясь от CID компонента

// Изменяем исходные параметры конкретного helloworld компонента.
@if($cid == helloworld) {
    $properties: map.merge($properties, (font-size: 18px));
}

Ссылки по теме:

← Темы →