合同小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

154 lines
3.7 KiB

  1. // #ifdef VUE3
  2. @use "sass:math";
  3. // #endif
  4. @function div($dividend, $divisor) {
  5. // #ifdef VUE3
  6. @return math.div($dividend, $divisor);
  7. // #endif
  8. // #ifndef VUE3
  9. @return $dividend / $divisor;
  10. // #endif
  11. }
  12. @function to-number($string) {
  13. $result: 0;
  14. $is-negative: str-slice($string, 1, 1) == '-';
  15. $length: str-length($string);
  16. @if $is-negative {
  17. $string: str-slice($string, 2);
  18. $length: $length - 1;
  19. }
  20. $decimal-index: str-index($string, '.');
  21. @if $decimal-index {
  22. $decimal-str: str-slice($string, $decimal-index + 1);
  23. $decimal-length: str-length($decimal-str);
  24. $length: $length - $decimal-length - 1;
  25. $string: str-slice($string, 1, $decimal-index - 1);
  26. $result: to-number($decimal-str) * pow(10, $decimal-length * -1);
  27. }
  28. $numbers:(
  29. '0': 0,
  30. '1': 1,
  31. '2': 2,
  32. '3': 3,
  33. '4': 4,
  34. '5': 5,
  35. '6': 6,
  36. '7': 7,
  37. '8': 8,
  38. '9': 9,
  39. );
  40. @for $i from 1 through $length {
  41. $key: str-slice($string, $i, $i);
  42. $number: map-get($numbers, $key);
  43. $digit: if($number == 0, 0, if($length - $i > 0, pow(10, $length - $i), 0));
  44. $result: $result + $digit * $number + if($length - $i == 0, $number, 0);
  45. }
  46. @return if($is-negative, $result * -1, $result) ;
  47. }
  48. // 由于vue2 h5和app不支持动态rpx 故转成px
  49. @function rpx-to-px($rpx-string) {
  50. @if type-of($rpx-string) == list {
  51. $new-list: ();
  52. @each $value in $rpx-string {
  53. $v: $value + '';
  54. $start: str-index($v, 'rpx');
  55. @if $start {
  56. $new-list: append($new-list, rpx-to-px($v));
  57. } @else {
  58. $new-list: append($new-list, $value);
  59. }
  60. }
  61. @return $new-list;
  62. }
  63. @if type-of($rpx-string) == number and comparable($rpx-string, 1rpx) {
  64. @return rpx-to-px($rpx-string + '');
  65. }
  66. @if type-of($rpx-string) != string {
  67. @return $rpx-string;
  68. }
  69. $start: str-index($rpx-string, 'rpx');
  70. $number-map: (
  71. '-': 1,
  72. '0': 1,
  73. '1': 1,
  74. '2': 1,
  75. '3': 1,
  76. '4': 1,
  77. '5': 1,
  78. '6': 1,
  79. '7': 1,
  80. '8': 1,
  81. '9': 1,
  82. );
  83. @if not $start {
  84. @return $rpx-string;
  85. }
  86. $result: '';
  87. @while $start {
  88. // 获取 'rpx' 前的数字
  89. $number-end: $start - 1;
  90. $number-start: $number-end;
  91. @while $number-start > 0 and map-get($number-map, str-slice($rpx-string, $number-start, $number-start)) ==1 {
  92. $number-start: $number-start - 1;
  93. }
  94. // 提取数字部分
  95. $number: to-number(str-slice($rpx-string, $number-start + 1, $number-end));
  96. // 转换 'rpx' 到 'px'
  97. // $px-value: ($number / 2) + 'px';
  98. $px-value: div($number, 2) + 'px';
  99. $result: $result + str-slice($rpx-string, 0, $number-start) + $px-value;
  100. // 更新字符串和起始位置
  101. $rpx-string: str-slice($rpx-string, $start + 3);
  102. $start: str-index($rpx-string, 'rpx');
  103. }
  104. @return $result + $rpx-string;
  105. }
  106. @function create-var($name, $values...) {
  107. // 将不定数量的参数转换为列表
  108. $value-list: $values;
  109. $css-value: null;
  110. @if length($value-list) == 0 {
  111. @warn "The list must have at least 1 values.";
  112. } @else {
  113. // 初始化CSS变量的值为列表中的第一个值
  114. /* #ifdef VUE2 */
  115. $css-value: rpx-to-px(nth($value-list, 1));
  116. /* #endif */
  117. /* #ifndef VUE2 */
  118. $css-value: nth($value-list, 1);
  119. /* #endif */
  120. }
  121. // 检查列表长度是否大于等于2
  122. @if length($value-list) >= 2 {
  123. // 使用@for循环遍历剩余的值,并构建CSS变量的完整值
  124. @for $i from 2 through length($value-list) {
  125. /* #ifdef VUE2 */
  126. $css-value: $css-value + ", " + rpx-to-px(nth($value-list, $i));
  127. /* #endif */
  128. /* #ifndef VUE2 */
  129. $css-value: $css-value + ", " + nth($value-list, $i);
  130. /* #endif */
  131. }
  132. }
  133. /* #ifndef APP-NVUE || APP-ANDROID || APP-IOS */
  134. @return var(--l-#{$name}, #{$css-value});
  135. /* #endif */
  136. /* #ifdef APP-NVUE || APP-ANDROID || APP-IOS */
  137. @return $css-value;
  138. /* #endif */
  139. }