therte2nten/sassify-v8

📦 Большой набор миксинов и функций на языке CSS-препроцессора @sass

sassify-v8's Issues

Миксины Spacers (аналог из Bootstrap)

Миксины будут генерировать CSS-классы типа p-4, что будет значит padding: 4px. Такие utility-классы могут быть вполне полезны в разработке стилей и вёрстке.

@use 'node_modules/@therteenten/sassify' as sassify with (
  $dvalues--spacers-class-name__padding: 'p',
  $dvalues--spacers-use-em: true
);

/// @param {string} $type - тип утилиты (padding, margin)
/// @param {number} $max-value - максимальное количество утилитарных классов (`px-12`, например, при `$max-value == 12`)
@include sassify.create-spacers($type, $max-value);

Strict Mode

Итак! Необходимо реализовать «жесткий» режим вывода ошибок.

Настройка Strict Mode является лишь Sass-переменной с булевым значением.

@use "./node_modules/therteenten/sassify" as sassify with (
  $strict-mode: true
);

Что меняет Strict Mode?

При включенном жёстком режиме вывода ошибок сборки Sass компилятор прекращает сборку при появлении какой-либо ошибки, которую я отлавливаю в коде.

Например, если в параметр функции был передан неверный тип данных (List вместо Map). Вариантов использования Strict Mode в качестве защиты разработчика от выстрела себе в ногу много.

При выключенном режиме вывода ошибок сборки Sass компилятор не прекращает сборку, но она проходит без проблемных участков. Логи об ошибках соответственно выводятся в консоль через директиву @debug.

Сетка из Bootstrap 4.x

Т.к. сейчас сетка используется из ветки Bootstrap 3, а это ну очень старая версия, было бы неплохо добавить возможность выбора версии сетки.

Например:

// grid.scss
@use 'node_modules/@therteenten/sassify' as sassify;

@include sassify.grid-init(v4);

// или
@include sassify.grid-init-v4();

Или

@use 'node_modules/@therteenten/sassify' as sassify with (
  $setting--grid-version: 4
);

@include sassify.grid-init();

Конечно непонятно кому и зачем нужна сетка из Bootstrap 3. Возможно в будущем ее выпилю полностью в пользу сеток из новых веток Bootstrap 4 и 5, а, возможно, и 6.

Функция для получения цветов из Common

В папке ./common/colors/ есть большое количество карт (Map) цветов (Apple, Microsoft Windows, Material Design Colors), но чтобы их получить нужно прописать большую строчку кода. Например:

@use 'node_modules/@therteenten/sassify' as sassify with (
  // настройки Sassify
);

// ...

.text-error {
  color: sassify.map-deep-get(sassify.$color--md-red, 400);
  // ...
}

Слишком много кода, который можно упростить, написав функции, которые сами будут брать нужные цвета. Например:

// импорт Sassify показывать не буду, но он должен быть 

.text-error {
  color: sassify.color-md(red, 400);
  // или
  color: sassify.color-apple(ios-dark, red);
}

По мне выглядит опрятнее и достаточно понятнее. А если Sassify импортировано глобально (т.е. без пространства имён) через *, то ещё проще:

.text-error {

  color: color-md(red, 400);
  
  // или
  color: color-apple(macos, red);
  
  // ну и фон окрасим ради интереса 
  background-color: color-md(grey, 50);
  
}

Думаю вариант прям очень хороший. Надо реализовать это в грядущем обновлении Sassify.

Обработка `null` там, где надо

Что будет, если в миксин prefixer в параметр $prefixes передать null? Нужно обработать это поведение и отобразить сообщение-ошибку о неподходящем параметре.

Добавить в проект наработки family.scss

Миксины family.scss позволяют обращаться к родителям и потомкам дерева CSS-классов в Sass. Весьма полезная фича.