最近有点小心累，打算休息一段时间并且好好沉淀一下。趁着这难得的机会把以前常用的 mixin 归纳总结了一下，因为这些感觉都是挺实用的东西，归纳一下也会对以后项目的开发效率有很大的帮助。
那就直接开始吧～
- 单行溢出显示省略号
@mixin ellipsis(){
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
};
- 多行溢出显示省略号
@mixin ellipsis-ln($line){
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
overflow : hidden;
-webkit-line-clamp: $line;
}
参数 $line 表示行数，即超过多少行就显示省略号。
- 设置像素为 1 上边框（以 iphone6 为基准）
@mixin set-top-line($c: #C7C7C7) {
content: " ";
color: $c;
border-top: 1px solid $c;
transform: scaleY(0.5);
transform-origin: 0 0;
position: absolute;
left: 0;
top: 0;
right: 0;
}
可能有人会觉得这个 mixin 有点奇怪，为啥设置一个像素为 1 的上边框还需要这么麻烦写这么多代码，直接 border-top: 1px solid #ccc 不就搞定了吗？
这个就涉及到移动设备设备像素比的知识点了，我们知道 iphone6 的设备像素比是 2，所以在代码中 1px 其实在 iphone6 中表示的是 2 个物理像素，所以其实 border-top: 1px solid #ccc 这里设置的是像素为 2 的上边框。
那么你又可能有疑问了，我设置 border-top: 0.5px solid #ccc 不行吗？不好意思，不能如你所愿，你并不会得到一条像素为 1 的上边框。
其实上述代码的原理就是设置一条像素为 2 的上边框并通过 transform 属性将其缩小一倍。
需要注意的是，这个 mixin 是需要被放在 :before 或 :after 中的，并且由于使用了绝对定位，所以需要对元素设置相对定位才行。
但严格来讲其实上述代码也只能适应设备像素比为 2 的移动设备，那些设备像素比为 3 的移动设备最终会得到的是一条像素为 1.5（按照代码来看是这样）的上边框，但具体在设备中会显示成像素为 1 还是 2，我倒是没有去研究过，不过这个不在我考虑范围之内，表示移动设备这么多，宝宝心很累。
后续的「下、左、右、全」边框其实跟这个原理都是一样的。
- 设置像素为 1 下边框（以 iphone6 为基准）
@mixin set-bottom-line($c: #C7C7C7) {
content: " ";
color: $c;
border-bottom: 1px solid $c;
transform: scaleY(0.5);
transform-origin: 0 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
- 设置像素为 1 左边框（以 iphone6 为基准）
@mixin set-left-line($c: #C7C7C7) {
content: " ";
color: $c;
border-left: 1px solid $c;
transform: scaleX(0.5);
transform-origin: 0 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
- 设置像素为 1 右边框（以 iphone6 为基准）
@mixin set-right-line($c: #C7C7C7) {
content: " ";
color: $c;
border-right: 1px solid $c;
transform: scaleX(0.5);
transform-origin: 100% 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
- 设置像素为 1 边框（以 iphone6 为基准）
@mixin px_border($c: #C7C7C7,$r:0){
content: "";
display: block;
width: 200%;
height:200%;
box-sizing: border-box;
border: 1px solid $c;
border-radius:$r;
transform: scale(0.5);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
这个是设置整个边框的代码，比之前多了一个 $r 参数，这个表示的是边框的 border-radius 值。
- 设置 input 的 placeholder 字体颜色和大小
@mixin placeholder($c,$s){
&::-webkit-input-placeholder{
color:$c;
font-size:$s;
}
&:-moz-placeholder{
color:$c;
font-size:$s;
}
&::-moz-placeholder{
color:$c;
font-size:$s;
}
&:-ms-input-placeholder{
color:$c;
font-size:$s;
}
}
设计师经常会要求 input 的 placeholder 的字体有特定的颜色和大小，所以专门写了这个 mixin，很多地方调用起来都挺方便的。
- 设置垂直居中
@mixin vertical-center(){
transform: translateY(-50%);
-wbkit-transform: translateY(-50%);
position: absolute;
top: 50%;
}
这个原理应该也是挺好理解的，需要注意的就是还需要给元素设置一个 left 值和其父元素设置相对定位（道理你懂的）。
- 设置水平垂直居中
@mixin center(){
transform: translate(-50%,-50%);
-wbkit-transform: translate(-50%,-50%);
position: absolute;
left:50%;
top: 50%;
}
很简单的，同上。
- 设置文本模糊
@mixin blurry-text(){
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
关于 mixin 的归纳暂时就只有这么多了，以后有其它的会继续补上去的，专门把代码上传到 github 以便后续继续补充，想要直接看代码的可以戳 ttsy-library。这个是我直接归纳一些常用库的地方，其实里面还有一个 js 文件保存了一些共用的方法，不过发现好像也没有几个，就不在这里放出来丢人了，感兴趣的直接戳进去看就好了。
网友评论