fix: scss optimize, add unit in scss (#749)

packages/semi-foundation/datePicker/variables.scss

@@ -45,7 +45,7 @@ $spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 foot
 $spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
-$spacing-datepicker_month-padding: $spacing-base; 
+$spacing-datepicker_month-padding: $spacing-base;
 $spacing-datepicker_switch_datetime-paddingTop: $spacing-base; // 日期时间切换顶部内边距
 $spacing-datepicker_switch_datetime-paddingBottom: $spacing-base; // 日期时间切换底部内边距
 $spacing-datepicker_switch_text-paddingLeft: $spacing-tight; // 日期时间切换左侧内边距
@@ -176,7 +176,7 @@ $fontSize-datepicker_insetInput_compact-fontSize: 12px;
 $spacing-datepicker_switch_compact-padding: 6px;
 $spacing-datepicker_day_compact-margin: ($width-datepicker_day_compact - $width-datepicker_day_main_compact) / 2;
 $spacing-datepicker_weeks_compact-padding: 10px;
-$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2;
+$spacing-datepicker_weeks_compact-paddingTop: $spacing-tight - 2px;
 $spacing-datepicker_weekday_compact-paddingLeft: 10px;
 $spacing-datepicker_weekday_compact-paddingRight: 10px;
 $spacing-datepicker_weekday_compact-paddingBottom: $spacing-tight;

packages/semi-foundation/form/variables.scss

@@ -1,24 +1,24 @@
-$spacing-form_label-paddingTop: ($height-control-default - 20) / 2; // 水平布局表单标题顶部内边距
-$spacing-form_label_small-paddingTop: ($height-control-default - 24) / 2; // 水平布局 小尺寸表单标题顶部内边距
+$spacing-form_label-paddingTop: ($height-control-default - 20px) / 2; // 水平布局表单标题顶部内边距
+$spacing-form_label_small-paddingTop: ($height-control-default - 24px) / 2; // 水平布局 小尺寸表单标题顶部内边距
 
 $spacing-form_field_horizontal-paddingRight: $spacing-base; // 水平布局表单标题右侧内边距
-$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距 
+$spacing-form_field_group_horizontal-paddingRight: $spacing-base; // 水平布局表单组标题右侧内边距
 
 $spacing-form_field_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单顶部内边距
 $spacing-form_field_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单底部内边距
 
-$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距 
-$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距 
-$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距 
-$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距 
-$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距 
-
-$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距 
-$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距 
-$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距 
-$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距 
-$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距 
-$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距 
+$spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布局表单组顶部内边距
+$spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
+$spacing-form_section-marginTop: $spacing-super-loose - $spacing-base-tight; // 表单分组顶部内边距
+$spacing-form_section_text-paddingBottom: $spacing-tight; // 表单分组标题底部内边距
+$spacing-form_section_text-marginBottom: $spacing-extra-tight; // 表单分组标题底部外边距
+
+$spacing-form_label-paddingRight: $spacing-base; // 表单标题右侧内边距
+$spacing-form_label-marginBottom: $spacing-extra-tight; // 表单标题底部外边距
+$spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单标题图标左侧内边距
+$spacing-form_label_required-marginLeft: $spacing-extra-tight; // 表单标题必填标志左侧内边距
+$spacing-form_label_posLeft-marginRight: 0; // 水平布局表单标题右侧外边距
+$spacing-form_label_posLeft-marginBottom: 0; // 水平布局表单标题底部外边距
 $spacing-form_label_posTop-paddingTop: $spacing-extra-tight; // 垂直布局表单标题顶部内边距
 $spacing-form_label_posTop-paddingBottom: $spacing-extra-tight; // 垂直布局表单标题底部内边距
 $spacing-form_label_extra_posMid-marginTop: $spacing-extra-tight; // 表单额外信息辅助文字顶部外边距 - 居中
@@ -41,4 +41,4 @@ $color-form_alertIcon-icon-default: var(--semi-color-warning); // 警告表单
 $color-form_message_error-text-default: var(--semi-color-danger); // 错误表单项图标颜色
 $color-form_section-text-default: var(--semi-color-text-0); // 表单分组标题文字颜色
 $color-form_section-border-default: var(--semi-color-border); // 表单分组描边颜色
-$width-form_section-border: $border-thickness-control; // 表单分组描边宽度
+$width-form_section-border: $border-thickness-control; // 表单分组描边宽度

packages/semi-foundation/input/variables.scss

@@ -56,9 +56,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
-$height-input_large: $height-control-large - 2; // 输入框高度 & 行高 - 大尺寸
-$height-input_small: $height-control-small - 2; // 输入框高度 & 行高 - 小尺寸
-$height-input_default: $height-control-default - 2; // 输入框高度 & 行高 - 默认尺寸
+$height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
+$height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
+$height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸
 $height-input_wrapper_large: $height-control-large;
 $height-input_wrapper_small: $height-control-small;
 $height-input_wrapper_default: $height-control-default;
@@ -72,7 +72,7 @@ $motion-scale_size-inactive: 1;
 
 $width-input_append-border: $border-thickness-control; // 后置标签描边宽度
 $width-input_prepend-border: $border-thickness-control; // 前置标签描边宽度
-$width-input_group_pseudo-border: $border-thickness-control; 
+$width-input_group_pseudo-border: $border-thickness-control;
 $width-input_wrapper-border: $border-thickness-control-focus; // 输入框描边宽度
 $width-input_wrapper_focus-border: $border-thickness-control-focus; // 输入框描边宽度 - 选中态
 

packages/semi-foundation/popover/variables.scss

@@ -4,25 +4,23 @@ $color-popover-bg-default: var(--semi-color-bg-3); // 默认背景色
 $color-popover-border-default: var(--semi-color-border); // 默认描边颜色
 
 // Width/Height
-$width-popover_arrow: 24px; // 水平箭头宽度
+$width-popover_arrow: 24px; // 水平箭头宽度 ignore-semi-css-trans
 $height-popover_arrow: 8px; // 水平箭头高度
 $height-popover_arrow_vertical: 24px; // 垂直箭头高度
 $width-popover_arrow_vertical: 8px; // 垂直箭头宽度
 $height-tooltip_arrow: $height-popover_arrow;
-$width-tooltip_arrow: $width-popover_arrow;
+$width-tooltip_arrow: $width-popover_arrow; //ignore-semi-css-trans
 $width-tooltip_arrow_vertical: $width-popover_arrow_vertical;
 $height-tooltip_arrow_vertical: $height-popover_arrow_vertical;
-$width-popover_title-border: 1px; 
+$width-popover_title-border: 1px;
 
 
 // Spacing
 $spacing-popover_title-padding: 8px; // 气泡卡片标题内边距
 $spacing-popover_withArrow-padding: 12px; // 带箭头的气泡卡片标题内边距
-$spacing-popover_arrow_adjusted_offset-y: 6; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
+$spacing-popover_arrow_adjusted_offset-y: 6px; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
 $spacing-tooltip_arrow_adjusted_offset-y: $spacing-popover_arrow_adjusted_offset-y; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
-$spacing-tooltip_arrow_adjusted_offset-x: round(
-    $horizontal-rate * $width-tooltip_arrow
-); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题
+$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题 ignore-semi-css-trans
 
 // Radius
 $radius-popover: var(--semi-border-radius-medium); // 气泡卡片的圆角大小

packages/semi-foundation/scrollList/variables.scss

@@ -13,7 +13,7 @@ $color-scrollList_selected_item-icon: var(--semi-color-text-2); // 滚动列表
 $color-scrollList_footer-border: var(--semi-color-border); // 滚动列表底部描边颜色
 
 // Width/Height
-$height-scrollList: 300px; 
+$height-scrollList: 300px;
 $height-scrollList_item: 36px;
 $width-scrollList_item-border: $border-thickness-control;
 $width-scrollList_item_sel_svg: 16px;
@@ -34,7 +34,7 @@ $spacing-scrollList_item_ul-margin: 0;
 $spacing-scrollList_item_ul-paddingBottom: ($height-scrollList - $height-scrollList_item) / 2;
 $spacing-scrollList_item_sel_svg-marginRight: 12px;
 $spacing-scrollList_item_wheel_list_outer-paddingRight: $height-scrollList_item / 2;
-$spacing-scrollList_item_wheel_list_shade_pre-marginTop: -($height-scrollList_item / 2 + $border-thickness-control);
+$spacing-scrollList_item_wheel_list_shade_pre-marginTop: -1 * ($height-scrollList_item / 2 + $border-thickness-control);
 $spacing-scrollList_item_wheel_list_shade_post-marginTop: $height-scrollList_item / 2 + $border-thickness-control;
 $spacing-scrollList_footer-padding: 10px;
 

packages/semi-foundation/select/variables.scss

@@ -86,9 +86,9 @@ $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
 $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
 $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
-$spacing-select_tag-marginTop: $spacing-super-tight - 1; // 多项选择器标签顶部外边距
+$spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
-$spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
+$spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
 $spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距

packages/semi-foundation/tabs/variables.scss

@@ -61,7 +61,7 @@ $font-tabs_bar_extra_large-lineHeight: $height-tabs_bar_extra_large; // 大尺
 $height-tabs_bar_extra_small: 36px; // 小尺寸页签高度
 $font-tabs_bar_extra_small-lineHeight: $height-tabs_bar_extra_small; // 小尺寸页签文字行高
 
-$spacing-tabs_bar_extra-paddingY: 0; // 附加操作垂直内边距
+$spacing-tabs_bar_extra-paddingY: 0px; // 附加操作垂直内边距
 $spacing-tabs_bar_extra-paddingX: 5px; // 附加操作水平内边距
 $spacing-tabs_tab_icon-marginRight: $spacing-tight; // 附加操作垂直内边距
 $spacing-tabs_tab_icon-top: 3px; // 页签图标顶部位置
@@ -85,8 +85,8 @@ $spacing-tabs_bar_line_tab_medium-paddingBottom: $spacing-base-tight - $width-ta
 $spacing-tabs_bar_line_tab_medium-paddingLeft: $spacing-extra-tight; // 中等尺寸线条式页签左侧内边距
 
 $spacing-tabs_bar_line_tab_left-padding: 12px; // 垂直线条式页签左侧内边距
-$spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2;  // 小尺寸垂直线条式页签左侧内边距
-$spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2; // 中等尺寸垂直线条式页签左侧内边距
+$spacing-tabs_bar_line_tab_left_small-padding: $spacing-tight - 2px;  // 小尺寸垂直线条式页签左侧内边距
+$spacing-tabs_bar_line_tab_left_medium-padding: $spacing-base-tight - 2px; // 中等尺寸垂直线条式页签左侧内边距
 
 $spacing-tabs_content-paddingY: 5px; // 页签内容区垂直方向内边距
 $spacing-tabs_content-paddingX: 0; // 页签内容区水平方向内边距
@@ -96,7 +96,7 @@ $spacing-tabs_content_left-paddingY: 0; // 垂直页签内容区水平方向内
 
 $spacing-tabs_bar_card_tab-marginRight: $spacing-tight; // 卡片式页签右侧外边距
 $spacing-tabs_bar_card_tab_active-paddingTop: $spacing-tight; // 卡片式选中页签顶部内边距
-$spacing-tabs_bar_card_tab_active-paddingBottom: $spacing-tight - 1; // 卡片式选中页签底部内边距
+$spacing-tabs_bar_card_tab_active-paddingBottom: $spacing-tight - 1px; // 卡片式选中页签底部内边距
 $spacing-tabs_bar_card_tab_active-paddingLeft: $spacing-base-tight; // 卡片式选中页签左侧内边距
 $spacing-tabs_bar_card_tab_active-paddingRight: $spacing-base-tight; // 卡片式选中页签右侧内边距
 $spacing-tabs_bar_card_tab_left-marginBottom: $spacing-tight; // 垂直卡片式页签底部外边距

packages/semi-foundation/tooltip/variables.scss

@@ -1,5 +1,5 @@
-$horizontal-rate: 0.24; // 水平方向矫正因子
-$vertical-rate: 0; // 垂直方向矫正因子
+$horizontal-rate: 0.24; // 水平方向矫正因子 ignore-semi-css-trans
+$vertical-rate: 0; // 垂直方向矫正因子 ignore-semi-css-trans
 
 $motion-zoom_scale-from: 0.8; // 初始缩放 - 动画用
 $motion-zoom_opacity-from: 0; // 初始透明度 - 动画用
@@ -24,8 +24,9 @@ $height-tooltip_arrow: 7px; // 工具提示小三角箭头高度 - 水平
 
 $height-tooltip_arrow_vertical: 24px; // 工具提示小三角箭头高度 - 垂直
 $width-tooltip_arrow_vertical: 7px; // 工具提示小三角箭头宽度度 - 垂直
-$spacing-tooltip_arrow_offset-x: 1; // 水平方向渲染会有缝隙，所以加个偏移量
-$spacing-tooltip_arrow_offset-y: 1; // 垂直方向渲染会有缝隙，所以加个偏移量
+$spacing-tooltip_arrow_offset-x: 1px; // 水平方向渲染会有缝隙，所以加个偏移量
+$spacing-tooltip_arrow_offset-y: 1px; // 垂直方向渲染会有缝隙，所以加个偏移量
 
-$spacing-tooltip_arrow_adjusted_offset-y: 5; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
-$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题
+$spacing-tooltip_arrow_adjusted_offset-y: 5px; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
+
+$spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题 ignore-semi-css-trans