开始使用scss重构项目;

.gitignore

@@ -8,3 +8,5 @@ composer.lock
 public/upload/*
 /public/cdn/layui-ul.css
 /public/cdn/layui-ul.css.map
+/public/cdn/layui-ul.min.css
+/public/cdn/layui-ul.min.css.map

source/scss/_common.scss

@@ -0,0 +1,51 @@
+/* 通用类开始 */
+.ul-padding-md {
+    padding: 15px;
+}
+
+.ul-section {
+    margin-bottom: 15px;
+}
+
+.ul-icon-exit {
+    display            : inline-block;
+    width              : 16px;
+    height             : 16px;
+    background-image   : url("img/exit.png");
+    background-size    : cover;
+    background-position: center;
+}
+
+.ul-border-right {
+    border-right: 1px solid #bbb;
+}
+
+.ul-bg-white {
+    background-color: #fff;
+}
+
+.ul-bg-gray {
+    background-color: #eee;
+}
+
+.ul-bg-black {
+
+    background-color: #393D49;
+}
+
+.ul-color-main {
+    color: #6cf !important;
+}
+
+.ul-common-flex-list {
+    display  : flex;
+    flex-wrap: wrap;
+}
+
+.ul-common-flex-sb {
+    display        : flex;
+    align-items    : center;
+    justify-content: space-between;
+}
+
+/* 通用类结束 */

source/scss/layui-ul.scss

@@ -1,138 +1,7 @@
-/* 列表开始 */
+@import './common';
-.ul-nav-tree {}
+@import './list/index';
+@import './nav/index';
 
-.ul-nav-tree-group-title {
-    font-size  : 16px;
-    font-weight: 600;
-    line-height: 2;
-}
-
-.ul-nav-tree-item {
-    display    : flex;
-    align-items: baseline;
-    cursor     : pointer;
-    padding    : 5px;
-    white-space: nowrap;
-}
-
-.ul-nav-tree-item.current .ul-nav-tree-item-title {
-    color: #6cf;
-}
-
-.ul-nav-tree-item-title {
-    font-size: 15px;
-}
-
-.ul-nav-tree-item-desc {
-    font-size  : 14px;
-    color      : #999;
-    margin-left: 15px;
-}
-
-/* 列表结束 */
-
-/* 通用类开始 */
-.ul-padding-md {
-    padding: 15px;
-}
-
-.ul-section {
-    margin-bottom: 15px;
-}
-
-.ul-icon-exit {
-    display            : inline-block;
-    width              : 16px;
-    height             : 16px;
-    background-image   : url("img/exit.png");
-    background-size    : cover;
-    background-position: center;
-}
-
-.ul-border-right {
-    border-right: 1px solid #bbb;
-}
-
-.ul-bg-white {
-    background-color: #fff;
-}
-
-.ul-bg-gray {
-    background-color: #eee;
-}
-
-.ul-bg-black {
-
-    background-color: #393D49;
-}
-
-.ul-color-main {
-    color: #6cf !important;
-}
-
-.ul-common-flex-list {
-    display  : flex;
-    flex-wrap: wrap;
-}
-
-.ul-common-flex-sb {
-    display        : flex;
-    align-items    : center;
-    justify-content: space-between;
-}
-
-/* 通用类结束 */
-
-/* 用户头像开始 */
-
-.ul-avatar-list {}
-
-.ul-avatar-list-item {
-    display         : flex;
-    align-items     : center;
-    justify-content : space-between;
-    padding         : 8px;
-    background-color: #ddd;
-}
-
-.ul-avatar-list-item.current {
-    background-color: #bbb;
-}
-
-.ul-avatar-list-item-img {
-    height             : 48px;
-    width              : 48px;
-    background-image   : url("/static/images/avatar.png");
-    background-size    : cover;
-    background-position: center;
-    border-radius      : 3px;
-    background-color   : #fff;
-}
-
-.ul-avatar-list-item-info {
-    margin-left: 10px;
-    position   : relative;
-    width      : calc(100% - 48px - 10px);
-}
-
-.ul-avatar-list-item-time {
-    position: absolute;
-    right   : 0;
-    top     : 0;
-    color   : #999;
-}
-
-.ul-avatar-list-item-tips {
-    color        : #999;
-    font-size    : 14px;
-    display      : inline-block;
-    white-space  : nowrap;
-    width        : 100%;
-    overflow     : hidden;
-    text-overflow: ellipsis;
-}
-
-/* 头像结束 */
 
 /* 头部开始 */
 
@@ -1484,6 +1353,7 @@ body .layui-quote-gray {
     .ul-site-item {
         width: 49%;
     }
+
     .ul-site-item-desc {
         font-size : 11px;
         margin-top: 3px;

source/scss/list/_index.scss

@@ -0,0 +1 @@
+@import './ul-avatar-list'

source/scss/list/_ul-avatar-list.scss

@@ -0,0 +1,49 @@
+
+/* 用户头像开始 */
+
+.ul-avatar-list {}
+
+.ul-avatar-list-item {
+    display         : flex;
+    align-items     : center;
+    justify-content : space-between;
+    padding         : 8px;
+    background-color: #ddd;
+}
+
+.ul-avatar-list-item.current {
+    background-color: #bbb;
+}
+
+.ul-avatar-list-item-img {
+    height             : 48px;
+    width              : 48px;
+    background-image   : url("/static/images/avatar.png");
+    background-size    : cover;
+    background-position: center;
+    border-radius      : 3px;
+    background-color   : #fff;
+}
+
+.ul-avatar-list-item-info {
+    margin-left: 10px;
+    position   : relative;
+    width      : calc(100% - 48px - 10px);
+}
+
+.ul-avatar-list-item-time {
+    position: absolute;
+    right   : 0;
+    top     : 0;
+    color   : #999;
+}
+
+.ul-avatar-list-item-tips {
+    color        : #999;
+    font-size    : 14px;
+    display      : inline-block;
+    white-space  : nowrap;
+    width        : 100%;
+    overflow     : hidden;
+    text-overflow: ellipsis;
+}

source/scss/nav/_index.scss

@@ -0,0 +1 @@
+@import './ul-nav-tree'

source/scss/nav/_ul-nav-tree.scss

@@ -0,0 +1,30 @@
+/* 附带说明垂直导航 */
+.ul-nav-tree {}
+
+.ul-nav-tree-group-title {
+    font-size  : 16px;
+    font-weight: 600;
+    line-height: 2;
+}
+
+.ul-nav-tree-item {
+    display    : flex;
+    align-items: baseline;
+    cursor     : pointer;
+    padding    : 5px;
+    white-space: nowrap;
+}
+
+.ul-nav-tree-item.current .ul-nav-tree-item-title {
+    color: #6cf;
+}
+
+.ul-nav-tree-item-title {
+    font-size: 15px;
+}
+
+.ul-nav-tree-item-desc {
+    font-size  : 14px;
+    color      : #999;
+    margin-left: 15px;
+}