css最小影响原则

coderjam · coderjam · commit 8a5707e3d578 · 2022-07-24T14:04:05.000+08:00
diff --git a/src/index.scss b/src/index.scss
@@ -24,4 +24,4 @@ body {
   // 为什么这样写 font-family
   // 答案见 https://github.com/zenozeng/fonts.css/
   font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
-}
+}
diff --git a/src/lib/Button.vue b/src/lib/Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <button class="zhiwei-button" :class="`theme-${theme}`">
+    <button class="zhiwei-button" :class="`zhiwei-theme-${theme}`">
       <slot></slot>
     </button>
 </template>
@@ -15,6 +15,39 @@ props:{
 };
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
+$h: 32px;
+$border-color: #d9d9d9;
+$color: #333;
+$blue: #40a9ff;
+$radius: 4px;
+.zhiwei-button {
+  box-sizing: border-box;
+  height: $h;
+  padding: 0 12px;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  background: white;
+  color: $color;
+  border: 1px solid $border-color;
+  border-radius: $radius;
+  box-shadow: 0 1px 0 fade-out(black, 0.95);
+  & + & {
+    margin-left: 8px;
+  }
+  &:hover,
+  &:focus {
+    color: $blue;
+    border-color: $blue;
+  }
+  &:focus {
+    outline: none;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
 </style>
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="toggle" :class="{checked:value}"><span></span></button>
+  <button class="zhiwei-switch" @click="toggle" :class="{'zhiwei-checked':value}"><span></span></button>
 </template>
 <script lang="ts">
 export default {
@@ -16,10 +16,10 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 $h: 22px;
 $h2: $h - 4px;
-button {
+.zhiwei-switch {
   height: $h;
   width: $h * 2;
   border: none;
@@ -38,7 +38,7 @@ button {
     transition: all 250ms;
   }
 
-  &.checked {
+  &.zhiwei-checked {
     background: #1890ff;
 
     > span {
@@ -56,7 +56,7 @@ button {
     }
   }
 
-  &.checked:active {
+  &.zhiwei-checked:active {
     > span {
       width: $h2 + 4px;
       margin-left: -4px;
diff --git a/src/lib/zhiwei.scss b/src/lib/zhiwei.scss
@@ -0,0 +1,9 @@
+[class^="zhiwei-"], [class*=" zhiwei-"] {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 16px;
+  // 为什么这样写 font-family
+  // 答案见 https://github.com/zenozeng/fonts.css/
+  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,7 @@
+import "./lib/zhiwei.scss";
+import "./index.scss";
 import { createApp } from "vue";
 import App from "./App.vue";
-import "./index.scss";
 import { router } from './router';
 
 const app = createApp(App);
