create.scss 3.4 KB

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