CSS 架构之 tool 层

前言

之前我们说过，tool 层主要是放一些 Mixins 和函数。 而在我们平时 CSS 的开发中总是会遇到一些，比如说文字的居中啊，或者文本溢出后，需要隐藏，然后通过三个点也就是省略号来显示。而这个省略号呢，可能在 A 页面能用到，在 B 页面也有用到。

而我们不可能在每个页面中都写这么一个样式。这个时候我们就可以把这个代码放到 tool 层里面。做成一个公共的 mixins，在每个相应的页面在调用就好了。这就达到了代码公用的这么一个效果。还有说像，垂直剧中，水平居中，这种效果是比较常见的，都可以放到 mixins。当然 也可以做成一个 function。

Sassmagic

前面说了那么多，其实早就有人给我做好了。那就是 Sassmagic。

他很好的把文件都写好了，我们要做的就是把它安装。

如何安装？

我们打开链接把上面的三个文件下载下来。放入自己的 tool 文件夹里面。

局部或者全局引用就可以了。是不是很简单。

使用

那我们怎么使用呢？其实官方文档已经说明的很好了。但我还是忍不住要给大家大概说一丢丢。

比如说垂直水平居中。

如下就可以了。

//SCSS
.justify-center {    @include box-center;}

或者说控制文本溢出，用省略号显示。

//SCSSdiv {  @include box-clamp;}

是不是着急方便简单。

对了，献上官方文档

END~~~