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

less&scss 罕用 mixin&function汇合

scss

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

1. mixin 根底用法

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

2. 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;}

3. 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;}

4. 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; }}

5. 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; }}

6. 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 返回值 }
调用：变量名(参数);

1. function 传参

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

2. 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