公共方法

README.md

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-05 15:39:29
  * @LastEditors: ch
- * @LastEditTime: 2022-05-07 10:10:29
+ * @LastEditTime: 2022-05-07 11:39:38
  * @Description: file content
 -->
 # shop-pc
@@ -85,4 +85,21 @@ export {
 ## css
 - 采用BEM命名法
 
+### 兼容CSS
+``` css
+/* 以下兼容方式的样式请使用util.css中的adj方法 */
+.my-class{
+   transform: translate3d(-50%, 0, 0);
+   -webkit-transform: translate3d(-50%, 0, 0);
+   -moz-transform: translate3d(-50%, 0, 0);
+   -o-transform: translate3d(-50%, 0, 0);
+   -ms-transform: translate3d(-50%, 0, 0);
+}
+/* 使用以下方法 */
+@import "~/assets/scss/util.scss";
+
+@include adj(transform, translate3d(0, torem(100), 0));
+
+
+```
 

assets/scss/util.scss

@@ -1,41 +1,40 @@
 $baseFontSize: 100 !default;
 /**/
 
-@mixin compatible ($styleName, $value...) {
+@mixin adj ($styleName, $value...) {
-
   #{$styleName}: $value;
   -webkit-#{$styleName}: $value;
   -moz-#{$styleName}: $value;
   -o-#{$styleName}: $value;
   -ms-#{$styleName}: $value;
 }
-@mixin transition($value...) {
+// @mixin transition($value...) {
-  -webkit-transiton: $value;
+//   -webkit-transiton: $value;
-  -moz-transtion: $value;
+//   -moz-transtion: $value;
-  -ms-transtion: $value;
+//   -ms-transtion: $value;
-  transition: $value;
+//   transition: $value;
-}
+// }
-@mixin transition-delay($value...) {
+// @mixin transition-delay($value...) {
-  transition-delay: $value;
+//   transition-delay: $value;
-  -moz-transition-delay: $value; /* Firefox 4 */
+//   -moz-transition-delay: $value; /* Firefox 4 */
-  -webkit-transition-delay: $value; /* Safari 和 Chrome */
+//   -webkit-transition-delay: $value; /* Safari 和 Chrome */
-  -o-transition-delay: $value; /* Opera */
+//   -o-transition-delay: $value; /* Opera */
-}
+// }
 
-@mixin transform($value...) {
+// @mixin transform($value...) {
-  transform: $value;
+//   transform: $value;
-  -webkit-transform: $value;
+//   -webkit-transform: $value;
-  -moz-transform: $value;
+//   -moz-transform: $value;
-  -o-transform: $value;
+//   -o-transform: $value;
-  -ms-transform: $value;
+//   -ms-transform: $value;
-}
+// }
 
-@mixin animation($value...) {
+// @mixin animation($value...) {
-  -webkit-animation: $value;
+//   -webkit-animation: $value;
-  -moz-animation: $value;
+//   -moz-animation: $value;
-  -ms-animation: $value;
+//   -ms-animation: $value;
-  animation: $value;
+//   animation: $value;
-}
+// }
 @mixin keyframes($animationName) {
     @-webkit-keyframes #{$animationName} {
         @content;
@@ -51,12 +50,12 @@ $baseFontSize: 100 !default;
     }
 }
 
-@mixin filter($value...) {
+// @mixin filter($value...) {
-  -webkit-filter: $value;
+//   -webkit-filter: $value;
-  -moz-filter: $value;
+//   -moz-filter: $value;
-  -ms-filter: $value;
+//   -ms-filter: $value;
-  filter: $value;
+//   filter: $value;
-}
+// }
 
 @mixin linear-gradient($value...) {
   background: -webkit-linear-gradient($value); /* Safari 5.1 - 6.0 */
@@ -65,12 +64,12 @@ $baseFontSize: 100 !default;
   background: linear-gradient(t$value); /* 标准的语法 */
 }
 
-@mixin boxShow($value...) {
+// @mixin boxShow($value...) {
-  -webkit-box-shadow: $value;
+//   -webkit-box-shadow: $value;
-  -moz-box-shadow: $value;
+//   -moz-box-shadow: $value;
-  -ms-box-shadow: $value;
+//   -ms-box-shadow: $value;
-  box-shadow: $value;
+//   box-shadow: $value;
-}
+// }
 
 @function torem($value) {
   @return ($value / $baseFontSize * 1rem);