Problem to convert SCSS to LESS

Asked

Viewed 47 times

0

I am using a background made with svg from this link here but his color palette is SCSS and I’m using the LESS how can I convert these elements to LESS? I tried to put the @ in place of $ but it didn’t work follow the code in SCSS that I need to convert to 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%); 
}

ERROR WHEN CONVERTING: inserir a descrição da imagem aqui

svg less

  • Have you tested with CSS Variables? I think it didn’t work because this last line looks like a SASS Mixin and in LESS it should probably be otherwise.

  • I kind of figured out the problem I’ll rephrase the question

  • the problem is in this sequence of code #bg { background: radial-gradient(Ellipse at center, @color 0%, Darken(@color 50%) 100%); }

  • 1

    Guy by Codepen seems that the Example is not SASS is SCSS has some differences... Check out an example https://futurestud.io/blog/content/images/2014/Jun/sass-vs-scss.png here you can read about https://answall.com/questions/54453/qual%C3%A9-a-diferen%C3%A7a-entre-Sass-e-scss

  • understood I managed to make the color array via Less the problem and that this line of code I can not convert to Less you could tell me how it would look background: radial-gradient(Ellipse at center, $color 0%, Darken($color, 50%) 100%); it seems that the problem is that Darken do not know if it is called a different way in Less because when I compile the error in it

  • @hugocsl put up a bug print to see if I can clarify better

Show 1 more comment

1 answer

1


There are two problems: the first is that you are using functions that do not exist in LESS, the second is that the function darken() requires a valid color, and in the case of your code this is not occurring.

You are trying to get a random value from the list, but if you use this variable @color the way it is, you’ll see that its value is not a color: see in the online editor of LESS.

You can use javascript Evaluation (not found in the latest documentation, then edit with link) to use Javascript functions in the middle of LESS code, for example: Math#random() and Math.round().

To extract an item from a list, you must use the function extract(), then, with javascript Evaluation you can specify the maximum value based on the length of the list:

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

see online result

  • Result in codeopen: https://codepen.io/anon/pen/vpoZKj

Browser other questions tagged svg less

You are not signed in. Login or sign up in order to post.