Disassemple CSS into SCSS

0421be56 · iBug · 21346182 · 0421be56 · 0421be56 · 0421be56
Commit 0421be56 authored 4 years ago by iBug
--- a/_sass/content.scss
+++ b/_sass/content.scss
+.u_main-wrapper {
+  max-width: 1200px;
+  margin: 60px auto auto auto;
+}
+.main {
+  margin: 10px;
+}
+.main-col {
+  float: left;
+  width: 33%;
+}
+.main-block {
+  margin: 10px 5px 5px 5px;
+  padding: 10px;
+  background-color: white;
+}
+.block-title {
+  display: block;
+  margin: 5px auto 10px 15px;
+  font-size: 18px;
+  color: #337ab7;
+}
+.block-grid {
+  position: relative;
+  float: left;
+  width: 33%;
+  text-align: center;
+  height: 120px;
+}
+.block-grid > a {
+  display: block;
+  color: #666;
+}
+.grid-title {
+  display: block;
+  color: #333;
+}
+.grid-icon {
+  display: block;
+  font-size: 3.33em;
+}
+.block-grid.new::before {
+  content: "new";
+  position: absolute;
+  top: -1em;
+  right: 0;
+  font-size: 0.75em;
+  padding: 0 0.5em;
+  border-radius: 1000px;
+  background-color: #777;
+  color: #fff;
+}
+
+/* 矢量图标 */
+:root {
+  --fa-primary-opacity: 0.8;
+}
+.fas,
+.far,
+.fal,
+.fab {
+  opacity: 0.8;
+}
+.icon {
+  position: relative;
+  top: 10px;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+.footer {
+  margin: 20px;
+  font-size: 14px;
+  color: #777;
+}
+.footer > a {
+  color: #337ab7;
+}
+@media (max-width: 1000px) {
+  .u_main-wrapper {
+    margin: 100px auto auto auto;
+  }
+  .main-col {
+    width: 100%;
+  }
+}
--- a/_sass/main.scss
+++ b/_sass/main.scss
+@import "reset";
+@import "nav";
+@import "content";
\ No newline at end of file
--- a/_sass/nav.scss
+++ b/_sass/nav.scss
+.u_nav-wrapper {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: white;
+  border-bottom: 1px #ccc solid;
+  z-index: 10;
+}
+.u_nav {
+  max-width: 1400px;
+  margin: auto;
+}
+.u_nav-left {
+  margin: 18px;
+  font-size: 16px;
+}
+.u_nav-right {
+  margin: 18px;
+  font-size: 14px;
+  position: relative;
+  top: 3px;
+  float: right;
+  > a {
+    margin-right: 20px;
+  }
+}
+.u_nav-left,
+.u_nav-input {
+  float: left;
+}
+.u_nav-link {
+  color: #777;
+}
+.u_nav-input,
+.u_nav-btn {
+  float: left;
+  position: relative;
+  height: 38px;
+  top: 10px;
+  padding: 5px;
+  font-size: 16px;
+  color: #777;
+  border: 1px lightgray solid;
+}
+.u_nav-input {
+  display: block;
+  width: 200px;
+  border-right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* PC 端搜索框组 */
+.u_nav-btn {
+  font-size: 14px;
+  display: block;
+  width: 80px;
+  text-align: center;
+  cursor: pointer;
+  line-height: 24px;
+  vertical-align: middle;
+  border-radius: 0 3px 3px 0;
+
+  > ul {
+    border: 0;
+    > li {
+      display: none;
+    }
+  }
+
+  &:hover {
+    border-bottom: 0;
+    > ul {
+      border: 1px lightgray solid;
+      border-top: 0;
+      border-radius: 0 0 3px 3px;
+      > li {
+        display: block;
+      }
+    }
+  }
+}
+.u_nav-ul {
+  position: relative;
+  top: 7px;
+  left: -6px;
+  width: 80px;
+  display: block;
+  background-color: white;
+  z-index: 5;
+}
+.u_nav-li {
+  font-size: 14px;
+  display: block;
+  height: 35px;
+  line-height: 30px;
+  vertical-align: middle;
+}
+
+/* 移动端搜索框组 */
+.um_nav-input-group {
+  display: none;
+}
+@media (max-width: 1000px) {
+  .u_nav-right,
+  .u_nav-input-group {
+    display: none;
+  }
+  .um_nav-input-group {
+    display: block;
+  }
+  .um_nav-input,
+  .um_nav-btn {
+    display: block;
+    height: 30px;
+    margin-bottom: 10px;
+    float: left;
+    color: #777;
+    padding: 5px;
+    border: 1px lightgray solid;
+  }
+  .um_nav-input {
+    margin-left: 15px;
+    width: 130px;
+    font-size: 12px;
+    border-radius: 3px 0 0 3px;
+  }
+  .um_nav-btn {
+    font-size: 12px;
+    width: 50px;
+    text-align: center;
+    cursor: pointer;
+    line-height: 20px;
+    vertical-align: middle;
+    border-left: 0;
+    border-radius: 0;
+  }
+  .um_nav-btn:last-child {
+    border-radius: 0 3px 3px 0;
+  }
+}
--- a/_sass/reset.scss
+++ b/_sass/reset.scss
+html {
+  color: #777;
+  background-color: #f1f1f1;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, textarea, th, td {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  outline: none;
+}
+
+button, a:active, a:hover, a:focus, input {
+  outline: none;
+}
+
+input:required:invalid, input:focus:invalid {
+  box-shadow: none;
+}
+
+.clear {
+  clear: both;
+}
+
+/* HTML5 标签支持 */
+header, section, footer, aside, nav, article, figure {
+  display: block;
+}
+
+/* 依次为 macOS Windows Linux 字体回退 */
+h1, h2, a, p, span, div {
+  font-weight: normal;
+  font-family: "Helvetica Neue", "Hiragino Sans GB", "微软雅黑", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+}
\ No newline at end of file
--- a/css/style.css
+++ b/css/style.css
-@charset "utf-8";
-
-/*================================================= Reset ============================================================*/
-html {
-    color: #777;
-    background-color: #f1f1f1;
-}
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, textarea, th, td {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-ol, ul {
-    list-style: none;
-}
-a {
-    text-decoration: none;
-    outline: none;
-}
-button, a:active, a:hover, a:focus, input {
-    outline: none;
-}
-input:required:invalid, input:focus:invalid {
-    box-shadow: none;
-}
-.clear {
-    clear: both;
-}
-/* HTML5 标签支持 */
-header, section, footer, aside, nav, article, figure {
-    display: block;
-}
-/* 依次为 macOS Windows Linux 字体回退 */
-h1, h2, a, p, span, div {
-    font-weight: normal;
-    font-family: "Helvetica Neue", "Hiragino Sans GB", "微软雅黑", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
-}
-/*=============================================== END Reset ==========================================================*/
-
-
-/*=================================================== 导航 ============================================================*/
-.u_nav-wrapper {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background-color: white;
-    border-bottom: 1px #ccc solid;
-    z-index: 10;
-}
-.u_nav {
-    max-width: 1400px;
-    margin: auto;
-}
-.u_nav-left {
-    margin: 18px;
-    font-size: 16px;
-}
-.u_nav-right {
-    margin: 18px;
-    font-size: 14px;
-}
-.u_nav-left, .u_nav-input {
-    float: left;
-}
-.u_nav-right {
-    position: relative;
-    top: 3px;
-    float: right;
-}
-.u_nav-right > a {
-    margin-right: 20px;
-}
-.u_nav-link {
-    color: #777;
-}
-.u_nav-input, .u_nav-btn {
-    float: left;
-    position: relative;
-    height: 38px;
-    top: 10px;
-    padding: 5px;
-    font-size: 16px;
-    color: #777;
-    border: 1px lightgray solid;
-}
-.u_nav-input {
-    display: block;
-    width: 200px;
-    border-right: 0;
-    border-radius: 3px 0 0 3px;
-}
-/* PC 端搜索框组 */
-.u_nav-btn {
-    font-size: 14px;
-    display: block;
-    width: 80px;
-    text-align: center;
-    cursor: pointer;
-    line-height: 24px;
-    vertical-align: middle;
-    border-radius: 0 3px 3px 0;
-}
-.u_nav-ul {
-    position: relative;
-    top: 7px;
-    left: -6px;
-    width: 80px;
-    display: block;
-    background-color: white;
-    z-index: 5;
-}
-.u_nav-li {
-    font-size: 14px;
-    display: block;
-    height: 35px;
-    line-height: 30px;
-    vertical-align: middle;
-}
-.u_nav-btn > ul {
-    border: 0;
-}
-.u_nav-btn > ul > li {
-    display: none;
-}
-.u_nav-btn:hover {
-    border-bottom: 0;
-}
-.u_nav-btn:hover > ul {
-    border: 1px lightgray solid;
-    border-top: 0;
-    border-radius: 0 0 3px 3px;
-}
-.u_nav-btn:hover > ul > li {
-    display: block;
-}
-/* 移动端搜索框组 */
-.um_nav-input-group {
-    display: none;
-}
-@media (max-width: 1000px) {
-    .u_nav-right,.u_nav-input-group {
-        display: none;
-    }
-    .um_nav-input-group {
-        display: block;
-    }
-    .um_nav-input, .um_nav-btn {
-        display: block;
-        height: 30px;
-        margin-bottom: 10px;
-        float: left;
-        color: #777;
-        padding: 5px;
-        border: 1px lightgray solid;
-    }
-    .um_nav-input {
-        margin-left: 15px;
-        width: 130px;
-        font-size: 12px;
-        border-radius: 3px 0 0 3px;
-    }
-    .um_nav-btn {
-        font-size: 12px;
-        width: 50px;
-        text-align: center;
-        cursor: pointer;
-        line-height: 20px;
-        vertical-align: middle;
-        border-left: 0;
-        border-radius: 0;
-    }
-    .um_nav-btn:last-child {
-        border-radius: 0 3px 3px 0;
-    }
-}
-/*================================================= END 导航 ==========================================================*/
-
-
-/*=================================================== main ===========================================================*/
-.u_main-wrapper {
-    max-width: 1200px;
-    margin: 60px auto auto auto;
-}
-.main {
-    margin: 10px;
-}
-.main-col {
-    float: left;
-    width: 33%;
-}
-.main-block {
-    margin: 10px 5px 5px 5px;
-    padding: 10px;
-    background-color: white;
-}
-.block-title {
-    display: block;
-    margin: 5px auto 10px 15px;
-    font-size: 18px;
-    color: #337ab7;
-}
-.block-grid {
-    position: relative;
-    float: left;
-    width: 33%;
-    text-align: center;
-    height: 120px;
-}
-.block-grid > a {
-    display: block;
-    color: #666;
-}
-.grid-title {
-    display: block;
-		color: #333;
-}
-.grid-icon {
-    display: block;
-    font-size: 3.33em;
-}
-.block-grid.new::before {
-    content: "new";
-    position: absolute;
-    top: -1em;
-    right: 0;
-    font-size: 0.75em;
-    padding: 0 0.5em;
-    border-radius: 1000px;
-    background-color: #777;
-    color: #fff;
-}
-
-/* 矢量图标 */
-:root {
-	  --fa-primary-opacity: 0.8;
-}
-.fas, .far, .fal, .fab {
-	  opacity: 0.8;
-}
-.icon {
-    position: relative;
-    top: 10px;
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
-}
-.footer {
-    margin: 20px;
-    font-size: 14px;
-    color: #777;
-}
-.footer > a {
-    color: #337ab7;
-}
-@media (max-width: 1000px) {
-    .u_main-wrapper {
-        margin: 100px auto auto auto;
-    }
-    .main-col {
-        width: 100%;
-    }
-}
-/*================================================= END main =========================================================*/
--- a/css/style.scss
+++ b/css/style.scss
+---
+---
+
+@charset "utf-8";
+@import "main";