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

使用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}:before {
    content: "";
    width: 75%;
    height: 75%;
    border: 1px solid typeFunction($t);
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio-type_#{$t}:checked:before {
    content: "";
    width: 75%;
    height: 75%;
    border: 1px solid typeFunction($t);
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio-type_#{$t}:checked:after {
    content: "";
    width: 45%;
    height: 45%;
    text-align: center;
    background: typeFunction($t);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 20%;
    left: 20%;
  }

  .radio-type_#{$t}:checked+label {
    color: typeFunction($t);
  }

}

4、完整代码+对应react代码及呈现效果

css

$type:('success', 'primary', 'danger', 'warning', 'info', 'default');
$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
}


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

  .radio-type_#{$t}:before {
    content: "";
    width: 75%;
    height: 75%;
    border: 1px solid typeFunction($t);
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio-type_#{$t}:checked:before {
    content: "";
    width: 75%;
    height: 75%;
    border: 1px solid typeFunction($t);
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio-type_#{$t}:checked:after {
    content: "";
    width: 45%;
    height: 45%;
    text-align: center;
    background: typeFunction($t);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 20%;
    left: 20%;
  }

  .radio-type_#{$t}:checked+label {
    color: typeFunction($t);
  }

}

js

import React, { useEffect } from 'react'
import './index.scss'
interface Iprops {
  type: string
}
// const classnames = require('classnames')
function Radio(props: any) {
  const { type = 'default' }: Iprops = props
  // 声明一个名为“count”的新状态变量
  //   const [count, setCount] = useState(0)
  // 类似于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `You clicked count times`
  }, [])
  return (
    <div className={['tb-radio'].join(' ')}>
      <input type='radio' className={[`radio-type_${type}`].join(' ')} />
    </div>
  )
}
export default Radio

最终效果

最终的样式也就呈现上去了，写在最后最近也是在尝试使用 react-hook 尝试去写一套组件库，后续也会开展轮子公开课程，从零开始如何造轮子组件展现在博客上，希望大家后续可以多多支持，多多关注，一起共同进步。