therte2nten/sassify-v8

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

Sassify

📦 Большой набор миксинов и функций на языке CSS-препроцессора Sass для упрощения, улучшения и ускорения процесса написания стилей для веб-сайтов.

# npm
npm install @therteenten/sassify --save-dev

# Yarn
yarn add @therteenten/sassify --dev

# pnpm
pnpm install @therteenten/sassify -D

• Начало работы
• Документация проекта
• Тех. задание проекта
• Кастомизация и логика Sassify
• Strict Mode (жёсткий режим) — зачем?
• Список изменений
• Участие в разработке проекта

Нашли проблему? Есть предложение?

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

Сообщество

У проекта Sassify нет какого-либо сервера в Discord и нет своего канала или чата в Telegram или где-либо еще.

Все основные новости по проекту публикуются в личном Telegram-канале автора проекта - @therte2nten (там же есть и чат).

Версии

Для обеспечения прозрачности цикла выпуска и стремления поддерживать обратную совместимость Sassify поддерживается в соответствии с рекомендациями Semantic Versioning. Иногда я ошибаюсь, но я придерживаюсь этих правил, когда это возможно.

Благодарности

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

• Kitty Giraudel - за большое количество кода и статей по Sass,
• takamoso - за полезный код,
• Sindre Sorhus - за полезный код,
• разработчикам Bootstrap - за шаблон для этого README и сетку Bootstrap Grid,
• разработчикам CSS-препроцессора Sass - за непосредственно Sass,
• всем тем у кого я учился (хоть я и не помню ваши имена).

Лицензия

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

MIT License

Copyright (c) 2023 Haba Kudzaev <[email protected]>

Если Вы нашли нарушение чьей-либо лицензии в моем проекте, то просьба написать мне:

• Telegram
• Электронная почта
• VK

sassify-v8's Issues

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.

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

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

Функция для получения цветов из 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? Нужно обработать это поведение и отобразить сообщение-ошибку о неподходящем параметре.

Миксины 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);

Сетка из 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.