食谱

在本节中，我们将探讨如何充分利用 EffCSS 的功能。

StyleSheet makers 组成

StyleSheet maker 函数不必是纯函数——您可以通过组合调用其他函数（包括其他 StyleSheet maker）来收集样式。

Example

import { TStyleSheetMaker } from 'effcss';
import { type TFirstMaker, firstMaker } from 'firstMakerLib';
import { type TSecondMaker, secondMaker } from 'secondMakerLib';

export type TCompositeMaker = TFirstMaker & TSecondMaker;

export const compositeMaker: TStyleSheetMaker = (utils) => {
    return {
        ...firstMaker(utils),
        ...secondMaker(utils)
    };
};

StyleSheet maker 工厂

有时需要在不使用主题变量的情况下，在 StyleSheet maker 函数内部配置样式。在这种情况下，您可以描述 StyleSheet maker creator 函数，该函数将根据传入的参数创建一个样式表生成器。

Example

import { TStyleSheetMaker } from 'effcss';

export type TMakerCreator = (params: {
    sizes: {
        s: number;
        m: number;
        l: number;
    };
    max: number;
    min: number;
}) => TStyleSheetMaker;

export const DEF_PARAMS = {
    sizes: {
        s: 2.5,
        m: 5,
        l: 7.5
    },
    min: 0,
    max: 10
};

export const createMaker: TMakerCreator = (params = DEF_PARAMS) => (utils) => {
    const {
        sizes,
        max,
        min
    } = params;
    return {
        // css
    };
};

使用此功能时，您需要创建一个生成器实例，并使用它来创建样式表。

Example

import { type TConfiguredMaker, createMaker } from './maker';
export type TConfiguredMaker;
export const maker = createMaker({
    sizes: {
        s: 1,
        m: 4,
        l: 10
    },
    min: 0,
    max: 12
});

可变 StyleSheet maker

有时需要重新计算样式，但选择器本身必须保持不变。例如，您允许用户交互式地调整组件的大小和颜色。虽然 EffCSS 假定每个样式表只调用一次 StyleSheet maker 函数，但您可以使用 remake 方法实现重新计算。如果您有指向原始样式表的链接，此方法甚至允许您使用不同的样式表生成器。

Example

import { TStyleSheetMaker } from 'effcss';

const original: TStyleSheetMaker = () => ({
    // css
});
const substitute: TStyleSheetMaker = () => ({
    // css
});
const [originalBEM] = consumer.use(original); // use original
const substituteBEM = consumer.remake(substitute, original); // now substitute creates the original selectors
console.log(originalBEM('block.elem.mod').toString() === substituteBEM('block.elem.mod').toString()); // true - identical selectors

WARNING

如果您要更改样式表的创建者，请确保您的代码中仅包含对新创建者的引用。所有对原始版本的访问都将导致创建一个具有唯一键的新样式表。

CSS 属性有多个值

某些 CSS 属性在不同浏览器上的支持情况有所不同，因此您可能需要指定多个选项。为此，请使用数组并按所需顺序排列值。

Example

import { TStyleSheetMaker } from 'effcss';

const maker: TStyleSheetMaker = () => {
    return {
        '.cls': {
            textDecoration: ['underline', 'underline dotted'] // .cls{text-decoration:underline;text-decoration:underline dotted;}
        }
    };
};

使用现成的 CSS 样式 (^4.5.0)

有时您可能已经拥有一个包含现成 CSS 的字符串。您可以直接从生成器获取该字符串，以避免不必要的转换和调整。

Example

import { TStyleSheetMaker } from 'effcss';

const css = '.cls{text-decoration:underline;}';

const maker: TStyleSheetMaker = () => {
    return css;
};