less&scss 常用 mixin&function集合

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