SCSS arithmetische Operation mit Zeichenfolge

Question

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

Der obige Code ist selbsterklärend. Bitte korrigieren Sie mich.

Answer 1

können Sie calc-Funktion verwenden.

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

---

Update:

Lösung basiert auf "Casting a string to a number in Sass" -Artikel.

Sassmeister demo.

to-Nummer Funktion
input: '10px', Ausgang: 10;
input: 10px, Ausgang: 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);; 
} 

zu Einheit Funktion
input: '20px', Ausgang: 1 Pixel;
input: '35%‘, Ausgang: 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; 
} 

Verwendungsfunktionen. Erhalte zuerst die Nummer aus der Zeichenfolge. Zweitens, hole die Einheit aus der Zeichenfolge. Dann multiplizieren Sie die Anzahl der Einheit:

.selector { 
    $size: '10px'; 

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

generiert CSS:

.selector { 
    width: 5px; 
}