css – 如何在SASS中将字符串拆分为两个数字列表？

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

STR-分裂

@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, " "));}

转换为数字

至于将字符串值转换为数字,请查看Hugo Giraudel在SassMeister上的功能(或阅读他的blog post)