关于less:lessscss-常用-mixinfunction集合

scss

mixin：返回款式汇合
定义：@mixin 变量名 (参数) {款式}
调用：@include 变量名(参数);

mixin 根底用法

// 单行文本溢出
@mixin oneRowOverflow {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

mixin 传参

// 多行文本溢出
@mixin multipleRowsOverflow($width, $row) {
 width: $width;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 word-break: break-all;
 text-overflow: ellipsis;
 -webkit-line-clamp: $row;
}

mixin 参数默认值

// 多行文本溢出
@mixin multipleRowsOverflow($width: 100%, $row: 2) {
 width: $width;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 word-break: break-all;
 text-overflow: ellipsis;
 -webkit-line-clamp: $row;
}

mixin + 条件

// 弹性盒布局
@mixin flexLayout($justify: null, $align: null, $direction: null) {
 display: flex;

 @if $direction  !=null {flex-direction: $direction;}

 @if $justify  !=null {justify-content: $justify;}

 @if $align  !=null {align-items: $align;}
}

mixin + while 循环

// 批量 fontsize
@mixin fontSizeLoop($base:10, $increment:2, $max:52, $unit: 1px) {
 @while $base<= $max {.fz-#{$base + $increment} {font-size: ($base + $increment) * $unit;
     }
     $base: $base + $increment;
 }
}

mixin 内调用 mixin

// 居中图片
@mixin imgLayout($width: null) {
 @if $width  !=null {@if not unitless($width) {width: px2rem($width);
     }

     @else {width: $width;}
 }

 @include flexLayout(center, center);
 overflow: hidden;

 img {font-size: px2rem(12);
     width: 100%;
     object-fit: fill
 }
}

function: 用于解决参数最初返回一个特定值
定义：@function 变量名 (参数) {return 返回值}
调用：变量名(参数);

function 传参

@function stripUnits($target) {@return math.div($target, $target * 0 + 1);
}

function + 条件

@use 'sass:math';
@function px2rem($px, $context: $root-font-size) {@if not unitless($px) {$px: stripUnits($px);
 }

 @if not unitless($context) {$context: stripUnits($context)
 }

 @return $px / $context * 1rem;
}

less&scss 罕用 mixin&function 汇合

scss

less