🥇 Função de sombra de texto múltipla no SASS

Eu escrevi essa função de alguns dias atrás, tentando criar o famoso ‘I amsterdam’ estrutura em CSS puro .

Aqui está o que parece no CSS btw:

Cenário

Confira o código no CSSDeck: http://cssdeck.com/labs/full/iamsterdam

Isso exigia uma sombra de texto múltipla no texto com a cor escurecendo gradualmente. O texto contém cerca de aproximadamente 25 sombras de texto de cores variadas, portanto, obviamente, o CSS vanilla não é a melhor escolha aqui. SASS FTW!

Aqui está a função que criei:

// n is number of shadows required
@function multiple-text-shadow ($n, $color) {
  $value: '-1px 0 0 #{$color}';
  @for $i from 2 through $n {
    $value: '#{$value} , #{$i * -1}px 0 0 ' + darken($color, $i);
  }

  @return unquote($value);
}

Você o usa simplesmente como:

.my-text {
  text-shadow: multiple-text-shadow(20, #F00);
}

Aprendi muito hackeando isso, principalmente sobre funções, concatenação, unquoting, loops etc no SASS.

Related Posts