0

pessoal estou usando um background feito com svg desse link aqui porem a paleta de cores dele esta com SCSS e estou utilizando o LESS como posso converter esses elementos para o LESS? tentei colocar o @ no lugar do $ mais não funcionou segue o código em SCSS que preciso converter para LESS

SCSS:

$colors: (
  #feda3e,
  #cc6698,
  #0869ad,
  #ff8300,
  #7A86b8,
  #f05133,
  #2aa9e0,
  #71bf45,
  #ef0e39,
  #9e79d7,
);
$color: nth($colors, random(length($colors)));

#bg {
 background: radial-gradient(ellipse at center, @color 0%, darken(@color.toHSL, 50%) 100%); 
}

LESS:

@colors: 
  #feda3e,
  #cc6698,
  #0869ad,
  #ff8300,
  #7A86b8,
  #f05133,
  #2aa9e0,
  #71bf45,
  #ef0e39,
  #9e79d7
;
@color: nth(@colors, random(length(@colors)));

#bg {
 background: radial-gradient(ellipse at center, @color 0%, darken(@color, 50%) 100%); 
}

ERRO AO CONVERTER: inserir a descrição da imagem aqui

6
  • Vc testou com CSS Variables? Acho que não deu certo pq essa última linha parece um Mixin de SASS e no LESS deve ser de outra forma provavelmente.
    – hugocsl
    Commented 26/01/2018 às 11:57
  • meio que descobri o problema vou refazer a pergunta Commented 26/01/2018 às 12:02
  • o problema está nessa sequencia de código #bg { background: radial-gradient(ellipse at center, @color 0%, darken(@color 50%) 100%); } O less não reconhece esse Darken ai nãos ei o motivo Commented 26/01/2018 às 12:04
  • 1
    Cara pelo CodePen parece que o Exemplo não é SASS é SCSS tem algumas diferenças... Olha aqui um exemplo futurestud.io/blog/content/images/2014/Jun/sass-vs-scss.png aqui vc pode ler a respeito pt.stackoverflow.com/questions/54453/…
    – hugocsl
    Commented 26/01/2018 às 12:15
  • entendi eu consegui fazer o array de cores via less o problema e que essa linha de código não consigo converter pra less você saberia me dizer como ficaria background: radial-gradient(ellipse at center, $color 0%, darken($color, 50%) 100%); parece que o problema é esse darken não sei se ele e chamado de uma forma diferente no less porque quando eu compilo da erro nele Commented 26/01/2018 às 12:18

1 Resposta 1

1

São dois problemas: o primeiro é que você está utilizando funções que não existem no LESS, o segundo é que a função darken() requer uma cor válida, e no caso do seu código isso não está ocorrendo.

Você está tentando obter um valor aleatório da lista, porém se utilizar essa variável @color da forma que está, verá que o valor dela não é uma cor: ver no editor online do LESS.

Você pode utilizar javascript evaluation (não encontrei na documentação mais recente, depois edito com o link) para utilizar funções do Javascript em meio ao código LESS, por exemplo: Math#random() e Math.round().

Para extrair um item de uma lista, você deve usar a função extract(), então, com javascript evaluation você pode especificar o valor máximo com base no length da lista:

@colors: 
  #feda3e,
  #cc6698,
  #0869ad,
  #ff8300,
  #7A86b8,
  #f05133,
  #2aa9e0,
  #71bf45,
  #ef0e39,
  #9e79d7
;

@len: length(@colors);
@color: extract(@colors, `Math.round(Math.random() * @{len})`);

#bg {
 background: radial-gradient(ellipse at center, @color 0%, darken(@color, 50%) 100%); 
}

ver resultado online

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .