Sass 中比较常用的 mixin

Sep 13, 2022 · Yin灏

背景图片

@mixin bg-image($url){
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url($url + "@3x.png");
  }
}

/*
    .icon{
        @include bg-image(logo);
    }
*/

文本不换行

@mixin no-wrap(){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/*
    .box {
        @include no-wrap()
    }
*/

扩展点击区域（多用于移动端）

@mixin extend-click(){
  position: relative;
  &:before{
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}
/*
    .box {
        @include extend-click()
    }
*/

多行文本溢出（…）

@mixin multiEllipsis($line:2){
    overflow : hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}
/*
    .text{
        @include multiEllipsis(3)  // 表示只显示三行,多出来的显示省略号
    }
*/

透明度

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}
/*
    .box {
        @include opacity(0.8);
    }
*/

清除浮动

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
/*
    .box {
        @include clearfix()
    }
*/

美化占位符 placeholder 样式

@mixin beauty-placeholder($fz, $color: #999, $align: left) {
  &:-moz-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &:-ms-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
  &::-webkit-input-placeholder {
    font-size: $fz;
    color: $color;
    text-align: $align;
  }
}
/*
    input{
        @include beauty-placeholder(25px, #eee, left)
    }
*/

美化选中文本

@mixin beauty-select($color, $bgcolor) {
  &::selection {
    color: $color;
    background-color: $bgcolor;
  }
}
/*
    .text {
        @include beauty-select(#fff, #000)
    }
*/

毛玻璃效果

@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);
  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}
/*
    .box {
        @include blur(10px)
    }
*/

滤镜: 将彩色照片显示为黑白照片、保留图片层次

@mixin grayscale() {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
/*
    .img {
        @include grayscale()
    }
*/

文本居中

@mixin center($height:100%){
    height: $height;
    line-height: $height;
    text-align: center
}
/*
    .text{
        color: #fff;
        @include center(30px)
    }
*/

修改背景色等

@mixin background($border-radius:5px, $bg-color:#eee, $color:#fff, $font-weight:400){
    border-radius: $border-radius;
    background-color: $bg-color;
    color: $color;
    font-weight: $font-weight;
}
/*
    .container{
        @include background(10px, #eee, #fff, 700)
    }
*/

flex

@mixin flex ($direction: row, $justify-content: flex-start, $align-items: flex-start,$flex-wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-wrap: $flex-wrap;
}
/*
    .box {
        @include flex(row,flex-start,flex-start,wrap)
    }
*/

鼠标hover显示下划线

@mixin hoverLine($height:2px,$color:$color-text-primary){
    position: relative;
    &:hover::after{
        content: '';
        position: absolute;
        height:$height;
        width: 100%;
        background-color: $color;
        bottom: 0;
        left: 0;
    }
}
/*
    span{
      @include hoverLine(2px,$color-white);
    }
*/

- Book Lists -