refactor: scss style

src/scss/components/aside.scss

@@ -3,10 +3,10 @@ aside {
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
-  @include media('print') {
-    display: none!important;
+  @include media("print") {
+    display: none !important;
   }
-  @include media('<tablet') {
+  @include media("<tablet") {
     position: relative;
     top: 0;
     right: auto;
@@ -19,7 +19,7 @@ aside {
     li {
       display: table-cell;
       text-align: center;
-      border-radius: 0!important;
+      border-radius: 0 !important;
     }
     a {
       padding-right: 0;
@@ -28,9 +28,9 @@ aside {
   }
   li {
     margin-top: 6px;
-    transition: .2s linear;
+    transition: 0.2s linear;
     border-radius: 5px 0 0 5px;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0.8);
     a {
       display: inline-block;
       width: 100%;
@@ -39,7 +39,7 @@ aside {
       color: #fff;
     }
     &:hover {
-      background-color: rgba(55, 55, 55, .8);
+      background-color: rgba(55, 55, 55, 0.8);
     }
   }
 }

src/scss/components/content.scss

@@ -6,19 +6,19 @@ $white: #fff;
   height: 0;
   margin-top: -23px;
   margin-left: 15px;
-  content: '';
+  content: "";
   border: 8px solid $black;
   border-radius: 100%;
 }
 
 section {
   margin-bottom: 14px;
-  @include media('print') {
+  @include media("print") {
     margin-bottom: 8px;
   }
 }
 
-@include media('print') {
+@include media("print") {
   dl {
     margin: 10px 0;
   }
@@ -33,15 +33,15 @@ dd {
 }
 
 .column-6 {
-  @include media('>=desktop') {
+  @include media(">=desktop") {
     float: left;
     width: 50%;
   }
-  @include media('<desktop') {
+  @include media("<desktop") {
     width: 100%;
-    padding-left: 0!important;
+    padding-left: 0 !important;
   }
-  @include media('print') {
+  @include media("print") {
     float: left;
     width: 50%;
   }
@@ -56,11 +56,11 @@ dd {
   padding: 30px 45px;
   // padding: 20px 20px;
   background: $white;
-  @include media('<=phone') {
+  @include media("<=phone") {
     padding: 30px 10px;
   }
-  @include media('print') {
-    padding: 20px 20px!important;
+  @include media("print") {
+    padding: 20px 20px !important;
   }
 }
 
@@ -147,11 +147,11 @@ dd {
     margin-left: 26px;
     border-radius: 4px;
     background: $black;
-    @include media('<=phone') {
+    @include media("<=phone") {
       width: 75%;
       margin-left: 10px;
     }
-    @include media('print') {
+    @include media("print") {
       width: 75%;
       margin-left: 10px;
     }
@@ -170,7 +170,7 @@ dd {
   .language-skills {
     li {
       line-height: 1.4;
-      @include media('print') {
+      @include media("print") {
         line-height: 1.2;
       }
     }
@@ -190,12 +190,12 @@ dd {
   .experience-task {
     font-size: 15px;
     margin-left: 27px;
-    @include media('print') {
+    @include media("print") {
       font-size: 14px;
     }
   }
   .experience-time {
-    @include media('print') {
+    @include media("print") {
       font-size: 14px;
     }
     font-size: 15px;
@@ -215,7 +215,7 @@ dd {
 }
 
 .skills {
-  @include media('print') {
+  @include media("print") {
     .skill-content {
       margin: 0;
     }

src/scss/components/footer.scss

 footer {
   margin: 15px 6px;
-  @include media('print') {
+  @include media("print") {
     display: none;
   }
   a {

src/scss/components/header.scss

@@ -3,10 +3,10 @@ header {
   padding: 30px 45px;
   color: #fff;
   background-color: #333;
-  @include media('<tablet') {
+  @include media("<tablet") {
     padding: 30px 10px;
   }
-  @include media('print') {
+  @include media("print") {
     padding: 20px 45px;
   }
 }
@@ -14,10 +14,10 @@ header {
 .qrcode {
   float: left;
   margin: 0;
-  @include media('<=desktop') {
+  @include media("<=desktop") {
     display: none;
   }
-  @include media('print') {
+  @include media("print") {
     display: block;
     margin-top: 5px;
   }
@@ -30,14 +30,14 @@ header {
 .title {
   float: right;
   text-align: right;
-  @include media('<tablet') {
+  @include media("<tablet") {
     float: none;
     text-align: center;
     h2 {
       padding: 0 6px;
     }
   }
-  @include media('print') {
+  @include media("print") {
     float: right;
     text-align: right;
   }
@@ -61,13 +61,13 @@ address {
 
 .phone {
   display: none;
-  @include media('print') {
+  @include media("print") {
     display: block;
   }
 }
 
 .wechat {
-  @include media('print') {
+  @include media("print") {
     display: none;
   }
 }
@@ -76,13 +76,13 @@ address {
   font-size: 18px;
   float: left;
   padding-left: 16px;
-  @include media('<=desktop') {
+  @include media("<=desktop") {
     margin-top: 5px;
     li {
       line-height: 1.6;
     }
   }
-  @include media('print') {
+  @include media("print") {
     line-height: 1.4;
     margin-top: 0;
   }
@@ -91,7 +91,7 @@ address {
     line-height: 1.4;
   }
   a {
-    transition: .3s ease-out;
+    transition: 0.3s ease-out;
     text-decoration: none;
     color: #fff;
     &:hover {

src/scss/resume.scss

-@import '_include-media.scss';
-@import 'components/aside.scss';
-@import 'components/header.scss';
-@import 'components/content.scss';
-@import 'components/footer.scss';
+@import "_include-media.scss";
+@import "components/aside.scss";
+@import "components/header.scss";
+@import "components/content.scss";
+@import "components/footer.scss";
 * {
   box-sizing: border-box;
 }
@@ -18,7 +18,8 @@ h3 {
 }
 
 body {
-  font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
+  font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB",
+    "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
   background: #e0e0e0;
   -webkit-font-smoothing: antialiased;
 }
@@ -37,18 +38,18 @@ strong {
   margin-right: auto;
   margin-left: auto;
   box-shadow: 2px 2px 5px;
-  @include media('>=desktop') {
+  @include media(">=desktop") {
     width: 970px;
   }
-  @include media('>=tablet', '<=desktop') {
+  @include media(">=tablet", "<=desktop") {
     width: 750px;
   }
-  @include media('<=phone') {
+  @include media("<=phone") {
     margin-top: 0;
     padding: 5px 0;
     box-shadow: 0 0 0;
   }
-  @include media('print') {
+  @include media("print") {
     margin-top: 0;
     box-shadow: 0 0 0;
   }