如何用SASS实现按data属性数值范围选择DOM元素？

架构老林

2026-5-15

用Sass函数实现指定区间的data属性元素选择

当然可以！针对你这个网格布局的需求，我们可以写一个灵活的Sass函数，帮你快速生成对应区间的元素选择器，不用手动一个个写属性选择器。

第一步：编写Sass函数

这个函数会接收起始值和结束值两个参数，自动生成对应区间内所有data-product-grid-position属性的元素选择器：

@function product-grid-range($start, $end) {
  // 初始化空的选择器列表
  $selectors: ();
  
  // 处理起始值大于结束值的异常情况，自动交换两者
  @if $start > $end {
    $temp: $start;
    $start: $end;
    $end: $temp;
  }
  
  // 循环生成每个位置的选择器，合并成选择器组
  @for $i from $start through $end {
    $selectors: append($selectors, ".plp__products__item[data-product-grid-position='#{$i}']", comma);
  }
  
  // 返回最终的选择器组
  @return $selectors;
}

第二步：调用函数并添加样式

比如你需要选中data-product-grid-position="3"到data-product-grid-position="6"的元素，只需要这样调用函数：

#{product-grid-range(3, 6)} {
  // 这里写你需要的样式，比如高亮选中元素
  background-color: #f0f8ff;
  border: 1px solid #add8e6;
}

编译后的CSS效果

上面的Sass代码会编译成以下原生CSS，完全符合你的需求：

.plp__products__item[data-product-grid-position='3'],
.plp__products__item[data-product-grid-position='4'],
.plp__products__item[data-product-grid-position='5'],
.plp__products__item[data-product-grid-position='6'] {
  background-color: #f0f8ff;
  border: 1px solid #add8e6;
}