1

So I have found the following codepen that i am using within a project i am currently working on. I have implemented the code for the most part, however I am not familiar with the usage of the LESS preprocessor and so am trying to convert the styles to SCSS instead.

I am only struggling to convert the following line of code from LESS to SCSS:

transform: rotate(unit(`(Math.random()*8*(Math.random()-0.5)|0+1)*0.25`, turn));

Specifically the area of the line i am stuggling with is the usage of the | operator between the -0.5) | 0+1

Can anybody explain to me what the purpose of this is and how i may go about converting is to a SCSS fiendly alternative since my SCSS linter throws an error at this line.

Thanks in advance.

calumj_dev
  • 25
  • 9
  • You are executing JS and in JS `|` is bitwise operator. I am not using SASS, so does it support JS execution? – Justinas Nov 24 '20 at 12:14
  • Are yuo sure this is (pure) LESS? This looks like normal JavaScript inside backticks (`), but I'm not aware of LESS (or any other CSS preprocessor) using backticks like that. If that is JavaScript, then it's the use of the [bitwise OR operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) to convert a floating point to a integer number: https://stackoverflow.com/questions/12695504/using-bitwise-or-in-javascript-to-convert-to-integer – RoToRa Nov 24 '20 at 12:17
  • @RoToRa Yes, LESS can execute JS in backsticks: https://stackoverflow.com/questions/32621617/is-it-possible-to-call-a-javascript-function-with-less-variable-from-less-css – Justinas Nov 24 '20 at 12:18
  • @c-j-o Maybe this can simplify your work: https://stackoverflow.com/questions/41096204/how-to-generate-a-random-number-within-a-min-and-max-parameters-in-sass – Justinas Nov 24 '20 at 12:18
  • @Justinas Then it's very badly documented. I can't find anything on it on the LESS website. – RoToRa Nov 24 '20 at 12:21

0 Answers0