本文将介绍如何利用 SCSS（Sass）循环与数学计算 自动生成一个动态伸缩的网格布局。通过极少的代码，你将获得一个具备高可扩展性、高复用性，并完美支持键盘focus状态的交互效果。
🔧 核心思路：让布局“感知”交互状态
为了实现当鼠标悬停或键盘聚焦于某个格子时，其所在行与列自动放大的动态效果，我们的核心思路如下：
✔ 1. 变量化定义网格行列
将行数与列数定义为变量，便于后续计算与整体调整。
$rows: 3;
$cols: 3;
✔ 2. 循环生成格子样式
利用SCSS循环为每个格子生成唯一的背景色，创建视觉区分。
@for $i from 1 through 9 {
.item:nth-child(#{ $i }) {
background-color: hsl(($i * 30) % 360, 70%, 60%);
}
}
✔ 3. 自动计算行列位置
通过数学公式，在循环中自动计算出当前格子所处的行号和列号。
$row: ceil($i / $cols); // 计算当前元素所在行
$col: ($i - 1) % $cols + 1; // 计算当前元素所在列
✔ 4. 响应交互状态，动态调整布局
使用CSS的 :has() 选择器（请注意浏览器兼容性），当某个格子处于:hover或:focus状态时，动态修改其所在行和列的grid-template值，实现局部放大效果。
.box:has(.item:nth-child(#{$i}):hover),
.box:has(.item:nth-child(#{$i}):focus) {
// 动态生成新的行、列尺寸列表
}
📦 完整SCSS代码
以下是可直接使用的完整SCSS代码，其核心在于通过循环和变量构建了灵活的布局规则。
* {
margin: 0;
padding: 0;
line-height: 1;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
$rows: 3;
$cols: 3;
.box {
width: 400px;
height: 400px;
margin-top: -200px;
display: grid;
grid-template-columns: repeat($cols, 1fr);
grid-template-rows: repeat($rows, 1fr);
gap: 10px;
box-sizing: border-box;
overflow: hidden;
transition: grid-template-rows 0.35s ease, grid-template-columns 0.35s ease;
}
.item {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
img {
width: 100%;
height: 100%;
display: block;
display: none;
}
}
// 为每个格子设置不同的背景色
@for $i from 1 through ($rows * $cols) {
.item:nth-child(#{ $i }) {
background-color: hsl(($i * 30) % 360, 70%, 60%);
}
}
// 核心交互逻辑：悬停/聚焦时放大对应行列
@for $i from 1 through ($rows * $cols) {
$row: ceil($i / $cols);
$col: ($i - 1) % $cols + 1;
.box:has(.item:nth-child(#{$i}):hover),
.box:has(.item:nth-child(#{$i}):focus) {
$rows-list: ();
@for $r from 1 through $rows {
$rows-list: append($rows-list, if($r == $row, 2fr, 1fr), space);
}
$cols-list: ();
@for $c from 1 through $cols {
$cols-list: append($cols-list, if($c == $col, 2fr, 1fr), space);
}
grid-template-rows: $rows-list;
grid-template-columns: $cols-list;
}
}
完整HTML结构
对应的HTML结构非常简单，只需一个容器和若干格子元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.scss">
<title>动态伸缩网格演示</title>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
总结
本方案展示了SCSS预处理器的强大能力，通过变量、循环和函数将复杂的动态样式规则自动化。这种方法不仅极大地减少了重复代码，还使得整个布局系统易于维护和扩展（例如，只需修改$rows和$cols变量即可改变网格规模）。同时，结合现代CSS特性如CSS Grid和:has()选择器，我们能够创造出富有表现力且具备良好可访问性的交互界面。这种动态布局思想，可以灵活运用到仪表盘、图片画廊等多种前端交互场景中。
发表于 20 小时前
|
查看: 2|
回复: 0
