实用Sass Mixin技巧-优快云博客

本文介绍了使用Sass Mixin实现代码复用的方法，包括清除浮动、居中布局、媒体查询等常见应用场景，并提供了实现三角形、1px边框效果的具体代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用mixin可以很方便的复用代码，下面介绍一些开发中经常用到的mixin

清除浮动clearfix

@mixin clearfix(){
    &:before,
    &:after{
        content:'';
        display:table;
    }
    &:after{
        clear:both;
    }
}
复制代码

居中布局

1.FLex布局

@minxin align-center{
    display:flex;
    justify-content:center;
    align-items:center;
}
复制代码

2.常规布局

@mixin center($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;
    @if not $width and not $height {
        transform:translate(-50%,-50%);
    } @else if $width and $height {
        width:$width;
        height:$height;
        margin-top:-($whidth/2);
        margin-left:-($whidth/2);
    } @else if not $height {
        width: $width;
        margin-left: -($width / 2);
        transform: translateY(-50%);
    } @else {
        height: $height;
        margin-top: -($height / 2);
        transform: translateX(-50%);
    }
}
复制代码

之后我们就可以很方便的实现各种居中布局了。

媒体查询

@mixin screen($min,$max){
    @media screen and (min-width:$min) and (maxd-width: $max){
        @content; //@content代表内容是自定义的
    }
}
@mixin min-screen($width){
    @media screen and (min-screen:$widht){
        @content;
    }
}
@mixin max-screen($width){
    @media screen and (max-screen:$width){
        @content;
    }
}
复制代码

常用字体

黑体、楷体、宋体、仿宋

@mixin font-hei() {
  font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
@mixin font-kai() {
  font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW\-Kai", serif;
}
@mixin font-song() {
  font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
}
@mixin font-fang-song() {
  font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;
}
复制代码

超出显示省略号

//$line:超出显示几行省略号
//$substract:预留区域百分比
@mixin text-overflow($line:1,$substract:0){
    overflow:hidden;
    @if $line==1{
        white-space:nowrap;
        text-overflow:ellipsis;
        width:100% -$substract;
    }
    @else{
        display: -webkit-box;
        -webkit-line-clamp: $line;
        -webkit-box-orient: vertical;
    }
}
复制代码

1px边框

$border-poses:top,
right,
bottom,
left;
$color:red;
@mixin border-1px($color:$color, $poses:$border-poses) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        @each $pos in $poses {
            border-#{$pos}: 1px solid $color;
            #{$pos}: 0;
        }
    }
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min-device-pixel-ratio: 1.5) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
}
@media (-webkit-min-device-pixel-ratio:2),
(min-device-pixel-ratio: 2) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.5); //像素比为2的时候，我们设置缩放为0.5
        transform: scaleY(0.5);
    }
}
@media (-webkit-min-device-pixel-ratio:3),
(min-device-pixel-ratio: 3) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.333333);//像素比为3的时候，我们设置缩放为0.33333
        transform: scaleY(0.333333);
    }
}
复制代码

画一个三角形

//三角形
@mixin triangle($width:10px, $height:10px, $color:red, $direction:top) {
    $angle-direction: ( top: bottom left right, bottom: top left right, left: right top bottom, right: left top bottom);
    $conf: map-get($angle-direction, $direction);
    @if $direction==top or $direction==bottom {
        $width: $width/2;
    }
    @else {
        $height: $height/2;
    }
    width: 0;
    height: 0;
    border-#{nth($conf, 1)}: $height solid $color;
    border-#{nth($conf, 2)}: $width solid transparent;
    border-#{nth($conf, 3)}: $width solid transparent;
}
复制代码