Начало работы

В этом разделе мы установим и подключим EffCSS к вашей странице. Затем мы напишем простую функцию StyleSheet maker и применим ее.

Установка

Введите в своем терминале:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Подключение

Для использования EffCSS вам необходимо получить провайдер стилей (Style provider). Для этого просто вызовите функцию useStyleProvider:

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider({
    // здесь могут быть ваши настройки
});

Провайдер стилей (Style provider) может быть сконфигурирован. Все доступные параметры и атрибуты смотрите в соответствующем разделе.

Использование

CSS таблица может быть создана с помощью функции StyleSheet maker. Это просто функция, которая должна вернуть объект или строку со стилями:

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = () => {
    const flexColumn = {
        display: 'flex',
        flexDirection: 'column',
    };
    return {
        html: {
            fontSize: '16px',
        },
        '.card': {
            width: '10rem',
            ...flexColumn,
            '.card__header': {
                height: '2rem',
            },
            '.card__body': flexColumn,
            ':hover': {
                borderRadius: '1rem',
            },
        },
    };
};

Обратите внимание, что названия CSS свойств можно писать в camelCase-стиле.

Затем используйте провайдер, чтобы добавить стили на страницу:

import { useStyleProvider } from 'effcss';
import { maker } from './maker';

const provider = useStyleProvider();
provider.use(maker);

Поздравляю! Ваши стили применились к странице. Просто, не так ли?

На самом деле, EffCSS может значительно упростить ваши функции StyleSheet maker с помощью утилит. Подробнее об этом рассказывается на следующей странице.