不错哦

src/common/__less/row.less

@@ -1,47 +0,0 @@
-@totalCell: 24;
-.col-width(@col: 1, @total: @totalCell){
-  percentage($col/$total)
-}
-.row {
-  @include clearfix;
-  @include media(xs) {
-    @for $i from 1 through $totalCell {
-      .col-xs-#{$i} {
-        float: left;
-      }
-      .col-xs-#{$i} {
-        width: col-width($i);
-      }
-    }
-  }
-  @include media(sm) {
-    @for $i from 1 through $totalCell {
-      .col-sm-#{$i} {
-        float: left;
-      }
-      .col-sm-#{$i} {
-        width: col-width($i);
-      }
-    }
-  }
-  @include media(md) {
-    @for $i from 1 through $totalCell {
-      .col-md-#{$i} {
-        float: left;
-      }
-      .col-md-#{$i} {
-        width: col-width($i);
-      }
-    }
-  }
-  @include media(lg) {
-    @for $i from 1 through $totalCell {
-      .col-lg-#{$i} {
-        float: left;
-      }
-      .col-lg-#{$i} {
-        width: col-width($i);
-      }
-    }
-  }
-}

src/common/css/__less/common.less

@@ -0,0 +1,4 @@
+@import "./util.less";
+@import (reference) "./meida.less";
+@import "./row.less";
+@import "./visible.less";

src/common/__less/meida.less → src/common/css/__less/meida.less

@@ -1,3 +1,7 @@
+/**
+* 响应式 媒体查询类
+**/
+
 .choose(@type, @style) when (@type=xs){
   @media (max-width: 768px){
     @style();

src/common/css/__less/row.less

@@ -0,0 +1,34 @@
+/**
+* 响应式布局类
+**/
+
+@totalCell: 24;
+.col-width(@col: 8, @total: @totalCell){
+   width: (@col/@total)*100%;
+}
+
+.col(@i, @mv) when (@i > 0) {
+  .col((@i - 1), @mv);    // 递归调用自身
+  .col-@{mv}-@{i} {
+        float: left;
+    }
+  	 .col-@{mv}-@{i} {
+         .col-width(@i);
+     }
+ }
+ 
+.row {
+  .clearfix();
+  .media({
+    .col(@totalCell, xs);
+  }, xs);
+ .media({
+    .col(@totalCell, sm);
+  }, sm);
+   .media({
+    .col(@totalCell, md);
+  }, md);
+   .media({
+    .col(@totalCell, lg);
+  }, lg);
+}

src/common/__less/common.less → src/common/css/__less/util.less

@@ -1,5 +1,31 @@
-@import (reference) "./meida.less";
+/**
+* 工具类
+**/
 
+/**
+* START============清除浮动=================START
+**/
+.clearfix() {
+  &:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    line-height: 0;
+    overflow: hidden;
+  }
+  *height: 1%;
+}
+
+.clearfix {
+  .clearfix();
+}
+/**
+* OVER=============清除浮动==================OVER
+**/
+/**
+* START============移动端头发丝=================START
+**/
 .hairline(@content) {
   &::after {
     content: " ";
@@ -19,39 +45,35 @@
 
 .hairline--all() {
   .hairline({
-        border-width: 1px;
+          border-width: 1px;
-    });
+      });
 }
 .hairline {
   .hairline--all();
 }
-  
+/**
-.ellipsis(@lines: 1) when (@lines = 1){
+* OVER=============移动端头发丝==================OVER
+**/
+/**
+* START============文本溢出省略号=================START
+**/
+.ellipsis(@lines: 1) when (@lines = 1) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.ellipsis{
+.ellipsis {
-  .ellipsis()
+  .ellipsis();
 }
-.over-ellipsis{
+.over-ellipsis {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3; 
+  -webkit-line-clamp: 3;
-  overflow: hidden;  
+  overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
 }
-
+/**
-.clearfix {
+* OVER=============文本溢出省略号==================OVER
-  &:after {
+**/
-    clear: both;
-    content: '.';
-    display: block;
-    height: 0;
-    line-height: 0;
-    overflow: hidden;
-  }
-  *height: 1%;
-}

src/common/css/__less/visible.less

@@ -0,0 +1,57 @@
+/**
+* 响应式类，控制元素的显示隐藏
+**/
+@display: block;
+
+@hide-array: hidden-xs, hidden-sm, hidden-md, hidden-lg;
+.hide(@i: 1) when(@i <= length(@hide-array)) {
+  @name: extract(@hide-array, @i);
+  .@{name} {
+    display: @display;
+  }
+  .hide((@i + 1));
+}
+.hide();
+
+@visible-array: visible-xs, visible-sm, visible-md, visible-lg;
+.visible(@i: 1) when(@i <= length(@visible-array)) {
+  @name: extract(@visible-array, @i);
+  .@{name} {
+    display: none;
+  }
+  .visible((@i + 1));
+}
+.visible();
+
+.media({
+    .visible-xs {
+        display: @display !important;
+    }
+    .hidden-xs {
+        display: none !important;
+    }
+}, xs);
+.media({
+   .visible-sm {
+        display: @display !important;
+   }
+   .hidden-sm {
+        display: none !important;
+   }
+}, sm);
+.media({
+   .visible-md {
+        display: @display !important;
+   }
+   .hidden-md {
+        display: none !important;
+   }
+ }, md);
+.media({
+   .visible-lg {
+        display: @display !important;
+   }
+   .hidden-lg {
+        display: none !important;
+   }
+ }, lg);

src/common/style.less → src/common/css/style.less

@@ -24,7 +24,7 @@ body{
   display: flex;
   align-items: center;
   height: 100px;
-  width: 300px;
+//   width: 300px;
   font-size: 2.0833em;
   line-height: 1.3;
   .head{
@@ -114,6 +114,7 @@ header{
   width: 200px;
   margin: 0 auto;
   cursor: pointer;
+  position: relative;
   &:hover{
       height: 15px;
       &::after{
@@ -122,6 +123,11 @@ header{
   }
   &::after{
       content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
       height: 5px;
       display: block;
       border-radius: 6px;

src/common/js/main.js

@@ -0,0 +1 @@
+console.log(123222);

src/html/__include/person.pug

@@ -1,7 +1,7 @@
 .userProfile.mb
   - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg"
-  .head XYX 
+  .head WXY 
     img(src=avatarURL, alt="topuser", srcset="").avatar
   .text 
-    .userName 温小鱼
+    .userName 温小鱼 
-    .userDesc.over-ellipsis 红尘一剑，骑马远游。
+    .userDesc.over-ellipsis 红尘一剑

src/html/index.pug

@@ -10,6 +10,4 @@ block content
     include __include/header
     include __include/person
     .line 
-    .motto 衣带渐宽终不悔
+    .motto.hidden-xs 衣带渐宽终不悔
-    .row
-      .column-3.panel adsdaad