scss实用小技巧循环+自定义函数的使用，学会它构建组件轮子工程时轻松 N+ 倍

Scss循环实现高效样式：减少type类型代码量

最新推荐文章于 2024-09-22 21:48:02 发布

原创

最新推荐文章于 2024-09-22 21:48:02 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#scss #css #前端

本文介绍了如何使用SCSS变量和自定义函数，通过循环为不同类型的样式编写更简洁的代码，以提升React组件的可维护性。通过实例展示了如何根据$type变量动态设置颜色和元素样式。

文章目录

- 使用scss循环样式代码，减少代码量

使用scss循环样式代码，减少代码量

1、首先定义一个scss变量用于存储所有的type类型

$type:('success', 'primary', 'danger', 'warning', 'info', 'default');

2、其次定义一个scss自定义函数用于 return 对应的数据变量类型

因为我在这边对应使用了全局变量下方是其数据对应

名称	颜色
$color-primary	#1089ff
$color-success	#52c41a
$color-info	#35495E
$color-warning	#fea638
$color-danger	#ff4d4f

$color-primary : #1089ff;
$color-success :#52c41a;
$color-info : #35495E;
$color-warning : #fea638;
$color-danger : #ff4d4f;

@function typeFunction($t) {
   
   
  @if $t==success {
   
   
    @return $color-success 
  }

  @else if $t==primary {
   
   
    @return $color-primary
  }

  @else if $t==info {
   
   
    @return $color-info
  }

  @else if $t==danger {
   
   
    @return $color-danger
  }

  @else if $t==warning {
   
   
    @return $color-warning
  }

  @return $color-primary
}

3、最后也就是对应type类型所展示的代码

@each $t in $type {
   
   
  .radio-type_#{
   
   $t} {
   
   
    width: 20px;
    height: 20px;
    appearance: none;
    position: relative;
    outline: none;
  }

  .radio-type_#{
   
   $t}:b