scss

scss/index.css

@@ -1,11 +1,17 @@
 @charset "UTF-8";
 @import url(reset.css);
-.happy, .con {
+.happy {
   width: 1000xp;
   height: 800px;
   border: 4px solid pink;
 }
 
+.con {
+  width: 500px;
+  height: 1000px;
+  background-color: lime;
+}
+
 /*多行注释*/
 .box {
   width: 500px;

scss/index.min.css

@@ -1 +1 @@
-@import url(reset.css);.happy,.con{width:1000xp;height:800px;border:4px solid pink}.box{width:500px;height:500px;border:2px solid red;font-size:30px;font-weight:bold;font-family:"Courier New", Courier, monospace;font-style:italic}.box h1{color:purple}.box h1 span{color:red !important;font-size:15px}.box ul li{color:plum}.box ul li:hover{color:red !important}.box1{width:500px;height:500px;color:red !important;background:#ff0;font-size:10px;background:lightblue;border-radius:50%;box-shadow:10px 10px 5px #ff0;box-shadow:10px 10px 10px blue}
+@import url(reset.css);.happy{width:1000xp;height:800px;border:4px solid pink}.con{width:500px;height:1000px;background-color:lime}.box{width:500px;height:500px;border:2px solid red;font-size:30px;font-weight:bold;font-family:"Courier New", Courier, monospace;font-style:italic}.box h1{color:purple}.box h1 span{color:red !important;font-size:15px}.box ul li{color:plum}.box ul li:hover{color:red !important}.box1{width:500px;height:500px;color:red !important;background:#ff0;font-size:10px;background:lightblue;border-radius:50%;box-shadow:10px 10px 5px #ff0;box-shadow:10px 10px 10px blue}

scss/index.scss

@@ -39,9 +39,18 @@ $box1: 2px solid #f00;
     background: #ccc;
     margin: 0 auto;
 }
+@function world($oo) {
+    @return $oo*2;
+}
+
 .con {
     // @extend %hi;
-    @extend .happy;
+    width: 1500px - 1000px;
+    // width: (1500px / 3);
+    // width: #{world(400)}px;
+    height: #{world(500)}px;
+    background-color: #000 + #0f0;
+    // @extend .happy;
 }
 // 单行注释 哈哈哈哈
 /*多行注释*/