123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- @function to-number($string) {
- $result: 0;
- $is-negative: str-slice($string, 1, 1) == '-';
- $length: str-length($string);
-
- @if $is-negative {
- $string: str-slice($string, 2);
- $length: $length - 1;
- }
-
- $decimal-index: str-index($string, '.');
-
- @if $decimal-index {
- $decimal-str: str-slice($string, $decimal-index + 1);
- $decimal-length: str-length($decimal-str);
- $length: $length - $decimal-length - 1;
- $string: str-slice($string, 1, $decimal-index - 1);
-
- $result: to-number($decimal-str) * pow(10, $decimal-length * -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 1 through $length {
- $key: str-slice($string, $i, $i);
- $number: map-get($numbers, $key);
- $digit: if($number == 0, 0, if($length - $i > 0, pow(10, $length - $i), 0));
- $result: $result + $digit * $number + if($length - $i == 0, $number, 0);
- }
- @return if($is-negative, $result * -1, $result) ;
- }
- // 由于vue2 h5和app不支持动态rpx 故转成px
- @function rpx-to-px($rpx-string) {
- @if type-of($rpx-string) == list {
- $new-list: ();
- @each $value in $rpx-string {
- $v: $value + '';
- $start: str-index($v, 'rpx');
- @if $start {
- $new-list: append($new-list, rpx-to-px($v));
- } @else {
- $new-list: append($new-list, $value);
- }
- }
- @return $new-list;
- }
-
- @if type-of($rpx-string) == number and comparable($rpx-string, 1rpx) {
- @return rpx-to-px($rpx-string + '');
- }
-
- @if type-of($rpx-string) != string {
- @return $rpx-string;
- }
- $start: str-index($rpx-string, 'rpx');
- $number-map: (
- '-': 1,
- '0': 1,
- '1': 1,
- '2': 1,
- '3': 1,
- '4': 1,
- '5': 1,
- '6': 1,
- '7': 1,
- '8': 1,
- '9': 1,
- );
- @if not $start {
- @return $rpx-string;
- }
- $result: '';
- @while $start {
- // 获取 'rpx' 前的数字
- $number-end: $start - 1;
- $number-start: $number-end;
- @while $number-start > 0 and map-get($number-map, str-slice($rpx-string, $number-start, $number-start)) ==1 {
- $number-start: $number-start - 1;
- }
- // 提取数字部分
- $number: to-number(str-slice($rpx-string, $number-start + 1, $number-end));
-
- // 转换 'rpx' 到 'px'
- $px-value: ($number / 2) + 'px';
- $result: $result + str-slice($rpx-string, 0, $number-start) + $px-value;
-
- // 更新字符串和起始位置
- $rpx-string: str-slice($rpx-string, $start + 3);
- $start: str-index($rpx-string, 'rpx');
- }
-
- @return $result + $rpx-string;
- }
- @function create-var($name, $values...) {
- // 将不定数量的参数转换为列表
- $value-list: $values;
- $css-value: null;
- @if length($value-list) == 0 {
- @warn "The list must have at least 1 values.";
- } @else {
- // 初始化CSS变量的值为列表中的第一个值
- /* #ifdef VUE2 */
- $css-value: rpx-to-px(nth($value-list, 1));
- /* #endif */
- /* #ifndef VUE2 */
- $css-value: nth($value-list, 1);
- /* #endif */
- }
- // 检查列表长度是否大于等于2
- @if length($value-list) >= 2 {
- // 使用@for循环遍历剩余的值,并构建CSS变量的完整值
- @for $i from 2 through length($value-list) {
- /* #ifdef VUE2 */
- $css-value: $css-value + ", " + rpx-to-px(nth($value-list, $i));
- /* #endif */
- /* #ifndef VUE2 */
- $css-value: $css-value + ", " + nth($value-list, $i);
- /* #endif */
- }
- }
-
- // APP-ANDROID || APP-IOS
- /* #ifndef APP-NVUE || UNI-APP-X && APP */
- @return var(--l-#{$name}, #{$css-value});
- /* #endif */
- /* #ifdef APP-NVUE || UNI-APP-X && APP */
- @return $css-value;
- /* #endif */
- }
|