SCSS中的百分号(%)到底有什么作用？

在SCSS/Sass中，百分号(%)主要有两个重要作用：

1. 占位符选择器 (Placeholder Selector)
   • 以%开头的选择器是Sass特有的占位符
   • 它不会被编译到最终的CSS中
   • 需要通过@extend指令来使用

// 定义占位符
%reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

// 通过@extend使用
.navbar {
  @extend %reset-list;
}

// 编译后的CSS中不会出现%reset-list
// 只有.navbar { margin:0; padding:0; list-style:none; }

2. 数字单位 (Percentage Unit)
   • 当%作为数字后缀时，表示百分比单位
   • 这与原生CSS中的百分比用法相同

.container {
  width: 100%; // 标准CSS百分比单位
}

.aspect-ratio {
  padding-top: 56.25%; // 用于实现16:9宽高比
}

关键区别： - 当%出现在选择器开头时是占位符 - 当%出现在数值后面时是CSS单位

占位符选择器的优势： 1. 避免生成多余的CSS代码 2. 比mixin更简洁(不会重复输出相同代码) 3. 比普通类选择器更语义化(不会被意外直接使用)

注意：在Sass 3.2.0及以上版本才支持占位符选择器功能。