【问题标题】：How to split a string into two lists of numbers in SASS?如何在 SASS 中将字符串拆分为两个数字列表？
【发布时间】：2018-09-18 05:04:00
【问题描述】：

我有一个 SASS/SCSS 字符串，其中包含两个列表（用逗号分隔），每个列表都包含数字（用空格分隔）。如何将字符串拆分为两个数字列表？

SCSS：

$values: "10px 20px 30px, 20px 30px 40px";

$begin: /* should be */ "10px", "20px", "30px";
$end: /* should be */ "20px", "30px", "40px";

// optionally it can be a map:
$begin: (10px, 20px, 30px);
$end: (20px, 30px, 40px);

Sass Meister 上的代码： http://sassmeister.com/gist/4d9c1bd741177636ae1b

【问题讨论】：

抱歉，从问题中删除#less 标签。
你为什么不用地图呢？
更新了我的问题，可以选择将字符串转换为地图。 $values 必须保持字符串格式，因为此代码是更大的 mixin 的一部分，它以与常规 css 相似的语法作为参数。
如果这不是您需要的格式，为什么还要将其作为字符串开头？这听起来像是一个 XY 问题。
@cimmanon 因为它是 mixin 的一部分，它以 padding: "10px 20px 30px, 20px 30px 40px" 为参数，我想保持这种方式而不是 padding: ((10px, 20px, 30px), (20px, 30px, 40px))。

标签： css sass

【解决方案1】：

嗯，你可以用这个函数分割字符串：

str-split

@function str-split($string, $separator) {
    // empty array/list
    $split-arr: ();
    // first index of separator in string
    $index : str-index($string, $separator);
    // loop through string
    @while $index != null {
        // get the substring from the first character to the separator
        $item: str-slice($string, 1, $index - 1);
        // push item to array
        $split-arr: append($split-arr, $item);
        // remove item and separator from string
        $string: str-slice($string, $index + 1);
        // find new index of separator
        $index : str-index($string, $separator);
    }
    // add the remaining string to list (the last item)
    $split-arr: append($split-arr, $string);

    @return $split-arr;
}

用法

在你的情况下，你可以这样使用它：

$values: "10px 20px 30px, 20px 30px 40px";
$list: ();

$split-values: str-split($values, ", ");
@each $value in $split-values {
  $list: append($list, str-split($value, " "));
}

转换为数字

至于将字符串值转换为数字，请查看 SassMeister 上 Hugo Giraudel 的函数（或阅读他的 blog post）

【讨论】：

您可能需要将 $string: str-slice($string, $index + 1); 替换为 $string: str-slice($string, $index + str-length($separator)); 以支持长度超过 1 个字符的分隔符

【解决方案2】：

递归函数也可以工作。

功能

@function str-split($string, $separator) {
  $i: str-index($string, $separator);
  @if $i != null {
    @return append(
      str-slice($string, 1, $i - 1),
      str-split(str-slice($string, $i + str-length($separator)), $separator)
    );
  }
  @return $string
}

用法

$values: '15px 10px 5px';
$result: str-split($values, ' '); /* $result equals '15px' '10px' '5px' */

说明

var $i 对应于给定$string 中第一个分隔符出现的索引。

递归结束的条件是保证余数中不存在分隔符。

该函数返回一个列表，其中包含第一个分隔符出现之前的子字符串和str-split 函数返回的值，其余子字符串作为参数。

请注意，str-length 用于启用超过 1 个字符的分隔符。

要删除引号，您可以在 return 语句中使用 unquote($string) 而不是 $string。

【讨论】：

很好，除了您的函数不能按预期工作，因为append() 将您的第二个参数添加为嵌套列表。 join() 是你所追求的。

【解决方案3】：

你可以用很少的自定义 SASS 函数来实现这一点

@function split-str($string, $separator) {

   $index : str-index($string,  $separator);

   $str-1 : str-slice($string, 1, $index - 1);
   $str-2 : str-slice($string, $index + 1);

   @return $str-1 $str-2;
}

然后像这样调用这个函数，

$values: "10px 20px 30px , 20px 30px 40px";
$list : split-str($values, ',');
$m-1  : nth($list, 1);
$m-2  : nth($list, 2);

并确保在分隔符前后留一个空格

【讨论】：

【解决方案4】：

您不会，至少在没有 3rd 方库的情况下不会（这几乎肯定需要用 Ruby 编写的自定义函数）。即使 Sass 有一个用于拆分字符串的本机函数，它也没有办法将字符串转换为数字（我怀疑它永远不会）。

如果您想要数字列表，请使用数字列表。

【讨论】：