sass 语法综合案例

收录了一些日常使用sass的案例集合，不定期更新

一般写业务，基础 sass的语法足够了，偶尔遇到有意思的，就记录并学习一下

scss 复制代码

@use 'sass:math';

@for $i from 0 to 9 {
	// $i从0开始
	.box:has(.item:nth-child(#{$i + 1}):hover) {
		$r: math.floor(calc(math.div($i, 3) + 1)); // 取值1-3
		$c: $i % 3 + 1; // 取值1-3

		// 初始化状态， 下面只需要根据当前鼠标 hover到哪一行，哪一列， 将对应的 行的占比 改为 2fr， 列改为2fr
		$arr: 1fr 1fr 1fr;
		// 动态修改 @arr 的值， 比如 $r = 1, 则@arr: 1fr 2fr 1fr;   将索引下标为1的值，改为2fr
		$rows: set-nth($arr, $r, 2fr);
		$columns: set-nth($arr, $c, 2fr);

		grid-template-rows: $rows;
		grid-template-columns: $columns;
	}
}

除法的使用
控制一个数在一定的范围
取模 %
动态修改一组值
循环

最终编译为：

css 复制代码

.box:has(.item:nth-child(1):hover) {
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 2fr 1fr 1fr;
}

.box:has(.item:nth-child(2):hover) {
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

.box:has(.item:nth-child(3):hover) {
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 2fr;
}

.box:has(.item:nth-child(4):hover) {
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 2fr 1fr 1fr;
}

.box:has(.item:nth-child(5):hover) {
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
}

.box:has(.item:nth-child(6):hover) {
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 1fr 1fr 2fr;
}

.box:has(.item:nth-child(7):hover) {
  grid-template-rows: 1fr 1fr 2fr;
  grid-template-columns: 2fr 1fr 1fr;
}

.box:has(.item:nth-child(8):hover) {
  grid-template-rows: 1fr 1fr 2fr;
  grid-template-columns: 1fr 2fr 1fr;
}

.box:has(.item:nth-child(9):hover) {
  grid-template-rows: 1fr 1fr 2fr;
  grid-template-columns: 1fr 1fr 2fr;
}