一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

sass 语法综合案例

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

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

@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;
	}
}

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

最终编译为:

.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;
}

原文链接:https://juejin.cn/post/7326547700945223720 作者:知了清语

(0)
上一篇 2024年1月22日 下午4:05
下一篇 2024年1月22日 下午4:16

相关推荐

发表评论

登录后才能评论