@rx1310/klass.scss v1.2.3

klass.scss

Абсолютно бесполезная фигня, которая непонятна даже автору (ну мне).

Крч, прикол в том, что я вообще не выкупаю нахрен это написал, но оно, блин, работает. Причем я написал с первого раза и что-то с первого раза начало работать. А чё я? А я ниче. Прихерел от этого, но потом понял, что ничего такого прям крышесносного не написал и ошибку там просто нечему выкидывать. Такие дела.

Ах да, это миксин + функция на языке препроцессора SASS. Миксин klass позволяет написать CSS-стили для компонента в непонятной даже для меня структуре. А функция kvar() просто помогает не писать постоянно var(--propName), а просто kvar(propName). В принципе также бесполезная херь.

Как всё это юзать показано в примере ниже в пятом пункте.

Установка и использование

Для начала необходимо иметь установленный пакетный менеджер (напр.: npm или любой другой совместимый). Я буду показывать на примере npm.

Порядок действий:

1. откройте терминал (командную строку) в папке проекта:

   cd my-project

2. введите команду для установки npm-пакета @rx1310/klass.scss в проект:

   npm install @rx1310/klass.scss

3. дождитесь установки всех пакетов и зависимостей в проект

4. в основной SASS-файл стилей пропишите импорт модуля klass.scss:

   @use 'node_modules/@rx1310/klass.scss' as *;

   * означает, что миксины и функции из пакета @rx1310/klass.scss доступны глобально. Вы можете использовать пространство имён в SASS, чтобы избежать возможных конфликтов с другими пакетами/библиотеками.

5. создаете новый "класс" в файле стилей, как на примере ниже:

   @use 'node_modules/@rx1310/klass.scss' as *;
   @use 'node_modules/@rx1310/klass.scss' as k19;
   
   @include klass(button, (
     colorFont: #000,
     colorBackground: #fcfc,
     borderRadius: 8px
   )) {
     color: kvar(colorFont);
     background-color: kvar(colorBackground);
     @include border-radius(kvar(borderRadius));
   }

   и в итоговом CSS-файле должно быть что-то похожее:

   .button {
     --colorFont: #000;
     --colorBackground: rgba(255, 204, 255, 0.8);
     --borderRadius: 8px;
     color: var(--colorFont);
     background-color: var(--colorBackground);
     -webkit-border-radius: var(--borderRadius);
     -moz-border-radius: var(--borderRadius);
     border-radius: var(--borderRadius);
   }

6. готово!

Лицензия

Проект klass.scss распространяется совершенно бесплатно и находится под защитой лицензии MIT.

Инструментарий, используемый в разработке, распространяется по указанной автором / компанией / разработчиком лицензии, не зависящей от этого проекта!

MIT License
Copyright (c) 2022, Haba Kudzaev (rx1310) <rx1310@inbox.ru>

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