Como criar uma função complexa no Stylus

Tenho experimentado muito a Stylus recentemente e cada vez que a uso aprendo mais e mais truques. A seguir, mostrarei como criar a função calc () sem ter que repeti-la para cada prefixo do fornecedor.

Adicione os prefixos

Primeiro armazene os fornecedores em uma lista.

vendors = webkit moz ms

Em seguida, itere em cada fornecedor para criar os prefixos

for prefix in vendors
    s('-%s-calc()', prefix)

A função s () nos permite combinar nossos hífens com os itens em nosso array como um nó literário . Isso significa que a Stylus não tentará interpretar os hifens, mas simplesmente substituirá % s pelo prefixo no índice.

Antes de esquecer, devemos incluir também a versão não prefixada.

for prefix in vendors
    s('-%s-calc()', prefix)
s('calc()')

Crie a função

Em seguida, queremos criar uma função para chamar esse código toda vez que precisarmos usá-lo.

calc()
    for prefix in vendors
                s('-%s-calc(%s)', prefix, arguments)
            s('calc(%s)', arguments)

Para capturar tudo o que é passado pela função, usamos a variável local de argumentos . Isso nos permite fazer.

calc(30% - 10px)

No entanto, você notará que a expressão dentro dos colchetes é calculada e não é isso que queremos que os navegadores interpretem a função CSS corretamente. Portanto, precisamos passar nossa expressão entre aspas.

calc('30% - 10px')

Agora nossa função preservará a expressão, mas como resultado também imprimirá as aspas. Para evitar isso, devemos passar a variável local dos argumentos através da função unquote () .

calc()
    for prefix in vendors
        arguments = unquote(arguments)
    s('-%s-calc(%s)', prefix, arguments)
    s('calc(%s)', arguments)

Nossa função está começando a ganhar forma. Infelizmente não podemos usar calc () sozinho. Deve ser usado em conjunto com uma propriedade. Felizmente, Stylus tem outra variável local chamada current-property [0] que nos permite consultar a propriedade atual e outra add-property () que nos permite repetir a propriedade para cada prefixo do fornecedor.

calc()
    for prefix in vendors
        arguments = unquote(arguments)
        add-property(current-property[0], s('-%s-calc(%s)', prefix, arguments))
    s('calc(%s)', arguments)

Vá em frente e execute sua função dentro de uma classe

.test
    width calc('30% - 10px')

Que deve produzir

test {
    width: -webkit-calc(30% - 10px);
    width: -moz-calc(30% - 10px);
    width: -ms-calc(30% - 10px);
    width: calc(30% - 10px);
}

Agora eu acho isso muito fofo.

Adicionar tratamento de erros

Para aumentar a confiabilidade, você pode verificar se a função é usada em uma propriedade e gerar uma mensagem de erro caso não seja.

calc()
    if current-property
        for prefix in vendors
            arguments = unquote(arguments)
            add-property(current-property[0], s('-%s-calc(%s)', prefix, arguments))
        s('calc(%s)', arguments)
    else
        error('calc() must be used within a property')

E voila! Você tem uma função calc () .