PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

简介

在前端日益发展的今天，css的预处理技术已经非常成熟，比如sass，less。那么我们如何在项目中去更好的使用呢，减少对css的重复编写。也方便去维护css。

封装思想

我们首先要思考什么样的css可以进行封装，以及不可以封装的css，这样我们才可以更加高效的使用。比如我们可以封装的css有：取消常用标签的默认样式，flex布局，字体的大小，单行省略，多行省略等。我们封装的思想就是重复书写和通用的css都可以进行封装，然后去使用。不适合封装的css就是该样式就在页面出现了一次，就没有必要在进行封装，会变得多此一举。

如何封装

首先我们在项目中去创建一个公共的sass文件，在里面去编写我们常用的样式。实例：

// 单行文字超出 省略号显示
.overflow-omit1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

// 2行文字超出
.overflow-omit2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //多行在这里修改数字即可
  overflow: hidden;
  -webkit-box-orient: vertical;
}
//50%圆角
.bd-r {
  border-radius: 50%;
}

看到这里有的小伙伴会想，像flex,和字体大小的也要一项项的去书写吗？这多麻烦呀。其实我们有简单的方法去实现。在sass中还有一些语法我们可以使用，比如就可以使用 Sass中@each循环去实现。举个栗子：

这里可以新建一个sass文件去存放下面的选择项，有利于后期的维护。首先我们也是需要把所有的选择项都列举出来（里面的key值都是可以根据你们的习惯去更改）。如：

// 主轴
$flex-jc: (
        'start': flex-start,
        'end': flex-end,
        'center': center,
        'between': space-between,
        'around': space-around,
        'evenly': space-evenly,
);
// 侧轴
$flex-ai: (
        'start': flex-start,
        'end': flex-end,
        'center': center,
        'stretch': stretch,
        'baseline':baseline
);

我们就可以循环去生成我们可以使用的css了。这样就减少了重复代码的编写。

//主轴 在这里循环我们上面定义的选择项
@each $flexKey, $flexValue in $flex-jc { 
  .jc-#{$flexKey} {
    justify-content: $flexValue;
  }
}

// 侧轴
@each $flexKey, $flexValue in $flex-ai {
  .ai-#{$flexKey} {
    align-items: $flexValue;
  }
}

这样就算是将flex布局的css封装完毕了。其实封装都是一样的套路，都可以根据需求去进行封装。

使用封装的样式

在这里是vue项目中去使用。首先我们要在main.js中引入封装的sass文件，之后在标签中的class就可以正常使用我们封装的css名称，这样就会实现我们提前封装号的效果。如：

总结

这里的封装其实和新出的一个 tailwindcss 特别相似，感兴趣的可以看一看。如果这篇文章对你有帮助，记得点个赞。