正则

14.scss/index.css

@@ -23,10 +23,7 @@ ul li:first-child {
 }
 
 .one {
-  width: 400px;
-  height: 400px;
   color: #f00;
-  background: #ff0;
-  border-radius: 20px;
-  box-shadow: 55px 40px 30px blue;
+  font-style: italic;
+  font-weight: 700;
 }

14.scss/index.min.css

@@ -1 +1 @@
-h1{color:red}h2{width:400px;height:300px;color:purple !important;color:blue;border:2px solid red}ul li{color:red;font-size:40px;font-weight:bold}ul li:first-child{color:#0f0}.one{width:400px;height:400px;color:#f00;background:#ff0;border-radius:20px;box-shadow:55px 40px 30px blue}
+h1{color:red}h2{width:400px;height:300px;color:purple !important;color:blue;border:2px solid red}ul li{color:red;font-size:40px;font-weight:bold}ul li:first-child{color:#0f0}.one{color:#f00;font-style:italic;font-weight:700}

14.scss/index.scss

@@ -70,15 +70,40 @@ ul {
 // }
 
 // 带参 多值
-@mixin x($c...) {
+// @mixin x($c...) {
+//     color: #f00;
+//     background: #ff0;
+//     border-radius: 20px;
+//     box-shadow: $c;
+// }
+
+// .one {
+//     width: $cc + px;
+//     height: $cc + px;
+//     @include x(55px 40px 30px blue);
+// }
+
+// 继承
+// 基类
+// .vase {
+//     font-size: 30px;
+//     color: #0f0;
+// }
+
+// .one {
+//     width: $cc + px;
+//     height: $cc + px;
+//     @extend .vase;
+// }
+
+// 占位符
+// %
+%yy {
     color: #f00;
-    background: #ff0;
-    border-radius: 20px;
-    box-shadow: $c;
+    font-style: italic;
+    font-weight: 700;
 }
 
 .one {
-    width: $cc + px;
-    height: $cc + px;
-    @include x(55px 40px 30px blue);
-}
+    @extend %yy;
+}