scss

scss/index.css

@@ -31,6 +31,13 @@ p {
   box-shadow: 10px 20px 10px aqua;
 }
 
+.main {
+  width: 400px;
+  background: yellow;
+  height: 400px;
+  border: 2px solid #000;
+}
+
 .main ul {
   list-style: none;
 }

scss/index.min.css

@@ -1 +1 @@
-.box{width:400px;height:400px;border:3px solid #f00}.sun{width:30px;height:30px;border-radius:20px;border:1px solid #00f}h1{color:red;font-size:40px;font-weight:lighter}p{color:red;font-weight:800;width:200px;height:100px;border:2px solid #0f0;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:10px 20px 10px aqua}.main ul{list-style:none}.main ul li:first-child a{color:#ff0}.main ul li a{text-decoration:none;font-size:25px;font-weight:bold}.main ul li a:hover{color:red}
+.box{width:400px;height:400px;border:3px solid #f00}.sun{width:30px;height:30px;border-radius:20px;border:1px solid #00f}h1{color:red;font-size:40px;font-weight:lighter}p{color:red;font-weight:800;width:200px;height:100px;border:2px solid #0f0;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:10px 20px 10px aqua}.main{width:400px;background:#ff0;height:400px;border:2px solid #000}.main ul{list-style:none}.main ul li:first-child a{color:#ff0}.main ul li a{text-decoration:none;font-size:25px;font-weight:bold}.main ul li a:hover{color:red}

scss/index.scss

@@ -35,7 +35,9 @@
     border-radius: 20px;
     border: 1px solid #0ff;
 }
-
+@function only($x) {
+   @return $x *2;
+}
 $aa: #f00;
 $bb: 40;
 $cc: lighter !default;
@@ -56,6 +58,13 @@ p {
 }
 
 .main {
+    width:(800px/2);
+    // width: 2 * 400px;
+    // width: 800px - 200px;
+    // width: 500px + 200px;
+    background: #f00 + #ff0;
+    height: #{only(200)}px;
+    border: 2px solid #000;
     ul {
         list-style: none;