Problem to convert SCSS par LESS

Navigation
0

Personal I'm using a background made with svg from that here link though his color palette is with SCSS e I am using LESS how can I convert these elements to LESS ? I tried to put @ instead of $ but did not work follow 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%); 
}

CONVERTER ERROR:

    
asked by anonymous 26.01.2018 / 12:45

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're 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 the LESS online editor .

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

To extract an item from a list, you must use the extract() function, then javascript evaluation You can specify the maximum value based on 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 result online

    
26.01.2018 / 13:54
How to load data from an XML file into an HTML input field? CSS does not respond below Header