前端开发中一些常用的sass混入

移动端开发中一些比较常用的sass混入

背景图片
@mixin bg-image($url) {
    background: url('../images/' + $url) no-repeat;
    background-size: 100% 100%;
}
强制不换行
@mixin no-wrap() {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
扩展点击区域
@mixin extend-click() {
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}
单行/多行隐藏
@mixin ellipsis($lines: 1) {
    @if $lines !=1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    }
    @else {
        word-break: keep-all;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

PC端sass混入

兼容IE8透明度
@mixin alpha($num) {
    filter: alpha(opcity=$num*100);
    -moz-opacity: $num;
    -khtml-opacity: $num;
    opacity: $num;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$num*100);
}
上一篇:C++之路进阶——bzoj3524(Couriers)


下一篇:postgresql--column must appear in the group by clause or be used in an aggregate function