背景

当我们需要针对某一些样式，存在大量相同属性，唯一区别的就是一些数值的变化，而这些变化的数值，存在某一些数学关系，则可以采用 sass 数学函数

分析函数

根据上述绘图可得知，根据三角函数 可通过角度和半径计算 x y 轴坐标

绘制基础样式

@use 'sass:math' // 模块化导入 数学模块
$r: 120px; // 半径
$n: 6; // 因为绘制6个icon 
$setp: 360deg / $n; // 计算每个 icon 度数
.menu-item:nth-child(1) {
  //$deg:45deg;
  $deg: $step * 0;
  $x: $r * math.sin($deg); 
  // sin con 这些属于全局函数, 新版将推荐模块化开发, 推荐 模块化导入
  $y: $r * math.con($deg);
  $debug $x; // 可以在控制台打印出值
  $debug $y;
  transform: translate($x,$y);
}

.menu-item:nth-child(2) {
  //$deg:45deg;
  $deg: $step * 1;
  $x: $r * math.sin($deg);
  // sin con 这些属于全局函数, 新版将推荐模块化开发, 推荐 模块化导入
  $y: $r * math.con($deg);
$debug $x; // 可以在控制台打印出值
$debug $y;
  transform: translate($x,$y);
}

sass 循环函数

上述代码还是有冗余，sass 有 for 循环的方法，因此可以简化代码

@for $i from 1 through $n{
  .menu-item:nth-child(#($i)) {
  $deg: $step * ($i - 1);
  $x: $r * math.sin($deg);
  $y: - $r * math.con($deg);
  transform: translate($x,$y);
 }
}