less - 如何在 Less.js 中计算 cubehelix 配色方案？

Question

我想在 Less 中计算 cubehelix 配色方案，以便调整一些变量。我相信这需要 CIE L*a*b 颜色系统。我遇到了 Chroma.js，它似乎可以用于计算颜色，但现在我想将它集成到 Less 中。

Answer 1

Mike Bostock已经在 J​​avaScript 中实现并扩展了 cubehelix，作为D3.js 可视化库的插件（参见示例）。

您可以使用 Bostock 插件的代码为 Less 编写自定义函数。

1. 从 github 下载并解压缩源代码：https ://github.com/less/less.js/archive/master.zip
2. 跑npm install

3. 创建一个名为lib/less/functions/cubehelix.js并在其中写下以下内容的文件：

   var Color = require("../tree/color"),
   functionRegistry = require("./function-registry");
   
   function d3_interpolate(y) {
   return function(a, b) {
         a = a.toHSL();
         b = b.toHSL();
         var radians = Math.PI / 180;
         var ah = (a.h + 120) * radians,
             bh = (b.h + 120) * radians - ah,
             as = a.s,
             bs = b.s - as,
             al = a.l,
             bl = b.l - al;
   
         if (isNaN(bs)) bs = 0, as = isNaN(as) ? b.s : as;
         if (isNaN(bh)) bh = 0, ah = isNaN(ah) ? b.h : ah;
   
         return function(t) {
           var h = ah + bh * t,
               l = Math.pow(al + bl * t, y),
               a = (as + bs * t) * l * (1 - l),
               cosh = Math.cos(h),
               sinh = Math.sin(h);
           return "#"
               + hex(l + a * (-0.14861 * cosh + 1.78277 * sinh))
               + hex(l + a * (-0.29227 * cosh - 0.90649 * sinh))
               + hex(l + a * (+1.97294 * cosh));
         };
       };
     }
   
   function hex(v) {
       var s = (v = v <= 0 ? 0 : v >= 1 ? 255 : v * 255 | 0).toString(16);
       return v < 0x10 ? "0" + s : s;
   }
   
   functionRegistry.addMultiple({
   cubehelix: function(y,a,b,t) {
   return new Color(d3_interpolate(y.value)(a,b)(t.value).slice(1),1);
   }   
   });
   

4. 打开lib/less/function/index.js文件并附require("./cubehelix");加到寄存器函数列表中，就在之前return functions;

5. 运行grunt dist（创建一个新版本的less.js）

现在下面的Less代码：

p{color: cubehelix(1,red,blue,1);}
p{color: cubehelix(1,red,blue,0.5);}
p{color: cubehelix(1, hsl(300,50%,0%), hsl(-240,50%,100%), 0.3);}

输出：

p {
  color: #766cfd;
}
p {
  color: #21ba40;
}
p {
  color: #4c4c4c;
}