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 () .