更新时间:2023-11-07 09:08:46
您可以使用 calc
函数.
.selector {
$width: '10px';
width: calc(#{$width}/2);
}
更新:
基于在Sass中将字符串转换为数字的解决方案"文章.
Sassmeister 演示.
Sassmeister demo.
转号码功能
输入:'10px',输出:10;
输入:10px,输出:10px
to-number function
input: '10px', output: 10;
input: 10px, output: 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);;
}
到单位功能
输入:'20px',输出:1px;
输入:'35%',输出:1%
to-unit function
input: '20px', output: 1px;
input: '35%', output: 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;
}
函数用法.首先从字符串中获取数字.其次,从字符串中获取单位.然后将数字乘以单位:
Functions usage. At first get the number from string. Second, get the unit from string. Then multiply the number by the unit:
.selector {
$size: '10px';
$number: to-number($size);
$unit: to-unit($size);
width: ($number * $unit) / 2;
}
生成的css:
.selector {
width: 5px;
}