Tarifler

Bu bölümde, EffCSS özelliklerinden en iyi şekilde nasıl yararlanabileceğimize bakacağız.

Oluşturucuların (makers) birleşimi

StyleSheet maker fonksiyonunun saf (pure) olması gerekmez; diğer oluşturucular da dahil olmak üzere çeşitli fonksiyon çağrılarını birleştirerek stilleri toplayabilirsiniz.

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)
    };
};

Maker fabrikası

Bazen, tema değişkenlerini kullanmadan StyleSheet maker fonksiyonu içinde stilleri yapılandırmanız gerekebilir. Bu durumda, iletilen parametrelere dayalı olarak bir maker oluşturacak olan StyleSheet maker creator fonksiyonunu tanımlayabilirsiniz.

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
    };
};

Böyle bir özelliği kullanırken, oluşturucunun (maker) bir örneğini oluşturmanız ve bunu bir stil sayfası meydana getirmek için kullanmanız gerekecektir.

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
});

Oluşturucuları (makers) değiştirmek

Bazen stillerinizin yeniden hesaplanması gerekebilir ancak seçicilerin (selectors) aynı kalması gerekir. Örneğin, kullanıcıya bileşeninizin boyutlarını ve renklerini etkileşimli olarak ayarlama imkanı sunduğunuzu varsayalım. EffCSS, her bir stil sayfası için StyleSheet maker fonksiyonunun yalnızca bir kez çağrılacağını varsaysa da, remake yöntemini kullanarak yeniden hesaplama yapabilirsiniz. Hatta bu yöntem, orijinaline dair bir referansa sahipseniz farklı oluşturucular kullanmanıza bile olanak tanır.

Example

import { TStyleSheetMaker } from 'effcss';

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

WARNING

Stil sayfası için oluşturucuyu (maker) değiştiriyorsanız, kodunuzun yalnızca yeni oluşturucuya yönelik referanslar içerdiğinden emin olun. Orijinal sürüme yapılan tüm erişimler, kendine özgü benzersiz bir anahtara sahip yeni bir stil sayfasının oluşturulmasına yol açacaktır.

CSS özelliği için birden fazla değer

Bazı CSS özelliklerinin tarayıcı desteği farklılık gösterebilir; bu nedenle birden fazla seçenek belirtmeniz gerekebilir. Bunu yapmak için, değerlerin istenen sırada yer aldığı dizileri kullanın.

Example

import { TStyleSheetMaker } from 'effcss';

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

Hazır CSS stillerini kullanma (^4.5.0)

Bazen elinizde halihazırda hazır CSS içeren bir metin (string) bulunabilir. Gereksiz dönüştürme ve işlem süreçlerinden kaçınmak için, bunu oluşturucu (maker) fonksiyonundan döndürebilirsiniz.

Example

import { TStyleSheetMaker } from 'effcss';

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

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