前端纯css实现-一个卡片列表(一个例子浅谈@each @mixin @if)

预编译样式以灵活的方式实现卡片列表布局

通过@each动态生成css

  /* 通过@each动态生成css */
  $cardArr:(
    0:#eea362,
    1:#da2128,
    2:#4889da,
    3:#29c5e8,
    4:#4e71fd
  );
  @each $index,$colorBg in $cardArr {
    .card-card-#{$index} {
       background: rgba($colorBg,0.1);

       .card-icon{ 
         background: rgba($colorBg,1);
         box-shadow: 0px 3px 8px rgba($colorBg,0.3);
       }
    }  
  }

注意：此方法会生成.card-card-0 到 .card-card-4 5个class 适合页面面板显示小于5个卡片布局的结构

通过@mixin @if方法来判断超出省略行数

/* 文本超出省略 $line行数 */
@mixin textOverEllipsis($line:1) {
  text-align: justify;
  @if $line==1{  // 单行超出省略
    overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  
  }
  @else{  // 多行超出省略
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
} 

注意：在需要行数超出省略的标签里@inclde textOverEllipsis(x)的时候 要注意改标签要设置明确宽度。否则不生效

我们直接来个例子

举一反三

按照类似scss处理方法也很容易实现一下UI结构

声明：我是UI/UE 初入前端开发的新人 以上方法不一定最优,也存在缺陷，请前辈们见谅。主要目前完成第一次发布文章任务 嘿嘿！