前端开发中一些常用的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);
}