有没有办法简化此代码，为我的网页上的特定断点使用 javascript 创建 css 变量？

Question

我正在使用这段 javascript 代码来创建一个包含 css 变量的字符串。 它帮助我专门设置网页上每个断点的大小。

这是我的代码：

const sizes = {
  xs: 0.9,
  md: 2,
  lg: 2.5,
  xl: 4
};

function getCssVar(size) {
  var varStr = "";

  const defaultBPs = ["xs", "sm", "md", "lg", "xl"];

  defaultBPs.forEach(bp => {
    const bpi = defaultBPs.indexOf(bp);
    var nextHigherIndex = defaultBPs.indexOf(Object.keys(size)[getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp))]);

    if (getNextHighestIndex(Object.keys(size).map(bp => (defaultBPs.indexOf(bp))), defaultBPs.indexOf(bp)) === Object.keys(size).length) {
      nextHigherIndex = defaultBPs.length;
    }

    if (size[bp]) {
      defaultBPs.forEach(bp2 => {
        const bp2i = defaultBPs.indexOf(bp2);
        const generateVar = " --size-" + bp2 + ":" + size[bp] + ";";

        if (bp2i >= bpi && bp2i < nextHigherIndex) {
          varStr += generateVar;
        }
        
      })
    };

  });
  return varStr;
}

function getNextHighestIndex(arr, value) {
  var i = arr.length;
  while (arr[--i] > value);
  return ++i; 
}


console.log(getCssVar(sizes));

输出如下：

 --size-xs:0.9; --size-sm:0.9; --size-md:2; --size-lg:2.5; --size-xl:4;

从技术上讲，这是正确的答案，并且该代码已经可以工作，但我仍然想知道是否有任何方法可以改进我的代码。

我希望它更短、更紧凑，但具有相同的输出。

任何帮助将不胜感激。 谢谢。

Answer 1

我不知道我是否理解正确，但请将此逻辑视为一种选择......

//
// Main function
const getCssVar = (s, def) => {
  // Possible modes in proper sequence
  const modes = ["xs", "sm", "md", "lg", "xl", "xxl"];
  // Loop modes and check if value has been provided
  // If no lower values, put 0 or default if provided
  // Else put last provided value in gaps
  const res = {};
  let last = def || 0;
  for(let i = 0; i < modes.length; i++) last = res[`--size-${modes[i]}`] = s[modes[i]] || last;
  return res;
}

//
// Tests
console.log(getCssVar({
  md: 2,
  lg: 2.5,
  xl: 4
}, 1.33)); // here we override default lower value

console.log(getCssVar({
  md: 2,
  xl: 4
}));

console.log(getCssVar({
  xs: 0.9,
  md: 2,
}));