带字符串的 SCSS 算术运算答案

【问题标题】：SCSS arithmetic operation with string带字符串的 SCSS 算术运算
【发布时间】：2017-12-04 09:53:34
【问题描述】：

.selector {
    $width: '10px';
    width: (#{$width}/2); // output: "10px", but expected: 5px
}

上面的代码是不言自明的。请纠正我。

【问题讨论】：

标签： sass

【解决方案1】：

你可以使用calc函数。

.selector  {
  $width: '10px';
  width: calc(#{$width}/2);
}

更新：

解决方案基于“Casting a string to a number in Sass”文章。

萨斯迈斯特demo.

to-number功能
输入：'10px'，输出：10;
输入：10px，输出：10px

@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    }
  }

  @return if($minus, -$result, $result);;
}

to-unit函数
输入：'20px'，输出：1px;
输入：'35%'，输出：1%

@function to-unit($value) {
  @if type-of($value) != 'string' {
    @error 'Value for `to-unit` should be a string.';
  }

  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
  $parsed-unit: false;

  @each $unit in $units {
    // str-index - find substring in a string
    // 'px' in '10px' for example

    // $unit is a pair of ['px': 1px] (item in $units)
    // nth(['px': 1px], 1) returns 'px'
    // nth(['px': 1px], 2) returns 1px

    @if (str-index($value, nth($unit, 1))) {
      $parsed-unit: nth($unit, 2);
    }
  }

  @if (not $parsed-unit) {
    @error 'Invalid unit `#{$value}`.';
  }

  @return $parsed-unit;
}

函数用法。首先从字符串中获取数字。其次，从字符串中获取单位。然后将数字乘以单位：

.selector {
  $size: '10px';

  $number: to-number($size);
  $unit: to-unit($size);
  width: ($number * $unit) / 2;
}

生成的css：

.selector {
  width: 5px;
}

【讨论】：

它工作得很好，但 calc 不向后兼容。 sass 中没有任何其他解决方案或任何类型转换功能。
sass 中没有将字符串转换为数字的内置功能。您可以手动完成。我会尝试编写代码。
谢谢！还请建议任何库或第三方代码 sn-p 来实现相同的目标
@Rajkishore 如果对您有帮助，您能否将答案标记为有用:-)
感谢您的努力，它对我有用。但是相比其他脚本语言，它的多行代码只是为了实现非常简单的事情。不应该有一些原生的方式来做到这一点。好奇！。

【解决方案2】：

不要使用字符串定义$width的值，然后在#{ }括号内进行计算：

.selector {
    $width: 10px;
    width: #{$width / 2};
}

输出：

.selector {
  width: 5px;
}

calc() 仅在对动态值执行计算时才是必需的，但当所有输入都是静态已知的，则为此使用预处理器。

【讨论】：

这是正确的答案，但是你甚至不需要插值，width: $width / 2; 就可以了。