feat: scss学习

src/views/demo/scssLiveTranslate/json/scss_history.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": "1754982964897",
+    "title": "混合提取重复代码",
+    "scss": "@mixin flex-center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.container {\n    @include flex-center;\n    height: 100vh;\n}\n\n.box {\n    @include flex-center;\n    width: 50%;\n    height: 50%;\n}\n",
+    "css": ".container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n}\n.box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50%;\n  height: 50%;\n}",
+    "ts": 1754982964897
+  },
+  {
+    "id": "1754982799769",
+    "title": "for循环和颜色函数",
+    "scss": "$primary-color: #0077cc;\n@for $i from 1 through 5 {\n    li:nth-child(#{$i}) {\n        // 颜色函数，变暗\n        background-color: darken($primary-color, $i * 5%);\n        // 颜色函数，变亮\n        color: lighten($primary-color, $i * 5%);\n    }\n}\n",
+    "css": "li:nth-child(1) {\n  background-color: #0068b3;\n  color: #0086e6;\n}\nli:nth-child(2) {\n  background-color: #005999;\n  color: #0095ff;\n}\nli:nth-child(3) {\n  background-color: #004a80;\n  color: #1a9fff;\n}\nli:nth-child(4) {\n  background-color: #003c66;\n  color: #33aaff;\n}\nli:nth-child(5) {\n  background-color: #002d4d;\n  color: #4db5ff;\n}",
+    "ts": 1754982799770
+  },
+  {
+    "id": "1754982271731",
+    "title": "变量",
+    "scss": "$primary: #3490dc;\n  \n.btn {\n  color: $primary;\n  border: 1px solid $primary;\n}\n.list {\n  background: $primary;\n}\n  ",
+    "css": ".btn {\n  color: #3490dc;\n  border: 1px solid #3490dc;\n}\n.list {\n  background: #3490dc;\n}",
+    "ts": 1754982271731
+  }
+]