预处理器规范(SASS/LESS)

SASS和LESS作为CSS预处理器，提供了变量、嵌套、混合等特性，大幅提升了样式表的可维护性和开发效率。合理使用预处理器功能需要遵循特定规范，确保代码结构清晰且易于协作。

变量命名与作用域

变量命名采用短横线连接(kebab-case)，与CSS属性命名风格保持一致。全局变量定义在独立文件中，局部变量限制在作用域内。

// _variables.scss
$primary-color: #3498db;
$font-size-base: 16px;

// 组件内使用
.button {
  $local-padding: 10px; // 局部变量
  background: $primary-color;
  padding: $local-padding;
}

LESS中变量使用@符号前缀：

@border-radius: 4px;
.card {
  border-radius: @border-radius;
}

嵌套层级控制

嵌套深度不超过3层，过度嵌套会导致编译后选择器过长。伪类和媒体查询应直接嵌套在父选择器下。

// 正确示例
.article {
  &__header {
    &:hover {
      color: $primary-color;
    }
    
    @media (min-width: 768px) {
      font-size: $font-size-base * 1.2;
    }
  }
}

// 错误示例（嵌套过深）
.nav {
  ul {
    li {
      a {
        span {
          // 5层嵌套
        }
      }
    }
  }
}

混合宏(Mixins)规范

复用样式片段使用混合宏，参数超过3个时改用Map传递配置。混合宏名称使用动词+名词形式。

// 基础混合宏
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 带参数混合宏
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// 复杂参数使用Map
@mixin button-theme($config: ()) {
  $default: (
    bg-color: #eee,
    text-color: #333
  );
  $config: map-merge($default, $config);
  
  background: map-get($config, bg-color);
  color: map-get($config, text-color);
}

函数与运算

数值运算始终使用括号保证优先级，颜色运算使用专用函数。自定义函数需注明用途。

// LESS中的颜色运算
@base-color: #036;
.header {
  background-color: lighten(@base-color, 20%);
}

// SASS运算示例
$gutter: 30px;
.container {
  padding: ($gutter / 2); // 明确运算优先级
  width: calc(100% - #{$gutter});
}

模块化组织

按功能拆分文件，通过@use(SASS)或@import(LESS)引入。基础文件命名以下划线开头。

styles/
├── _variables.scss
├── _mixins.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
└── main.scss

SASS模块化引入：

// main.scss
@use 'variables' as vars;
@use 'components/buttons';

.button {
  color: vars.$primary-color;
}

条件与循环控制

循环生成样式时需添加注释说明，避免生成冗余代码。条件语句优先使用三元表达式。

// 栅格系统生成示例
$columns: 12;
@for $i from 1 through $columns {
  .col-#{$i} {
    width: percentage($i / $columns);
  }
}

// 条件样式
$theme: dark;
.page {
  @if $theme == dark {
    background: #333;
  } @else {
    background: #fff;
  }
}

继承与占位符

使用占位符选择器避免生成未使用的基类，继承链不超过2级。

%base-button {
  border-radius: 4px;
  padding: 8px 16px;
}

.primary-button {
  @extend %base-button;
  background: blue;
}

// 编译后不会生成.base-button类

错误处理与调试

使用@warn提示变量弃用，@debug检查计算值。自定义函数需验证参数类型。

@mixin deprecated-text {
  @warn "This mixin will be removed in v2.0";
  font-family: serif;
}

@function divide($a, $b) {
  @if $b == 0 {
    @error "Cannot divide by zero";
  }
  @return $a / $b;
}

性能优化要点

避免在循环中嵌套@import，大列表查询使用map-get替代遍历。禁用未使用的特性。

// 低效写法
@each $name in $list {
  @import "components/#{$name}";
}

// 高效方案
$component-map: (
  button: 'buttons',
  card: 'cards'
);

@each $key, $value in $component-map {
  .#{$key} {
    @import "components/#{$value}";
  }
}

浏览器前缀处理

通过autoprefixer处理兼容性，避免在预处理器中手动编写前缀。配置标准浏览器列表。

// 不推荐
.selector {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

// 推荐配置
// .browserslistrc
last 2 versions
not IE 11

注释与文档

公共接口需包含注释说明，使用SassDoc格式生成文档。嵌套代码块需标注结束范围。

/// 计算响应式字体大小
/// @param {Number} $min-size - 最小字体尺寸
/// @param {Number} $max-size - 最大字体尺寸
/// @return {String} calc()表达式
@function responsive-font($min-size, $max-size) {
  @return calc(#{$min-size}px + (#{$max-size} - #{$min-size}) * var(--scale));
}

// 嵌套范围标记
.sidebar {
  // ...styles
  
  @media (min-width: 1024px) {
    // ...styles
  } // @media结束
} // .sidebar结束

版本差异处理

标注SASS/LESS版本要求，对于不兼容语法提供替代方案。

// SASS 3.4+ required for &:selector syntax
.tabs {
  &__item {
    // ...
  }
}

// 兼容旧版本写法
.tabs__item {
  // ...
}

团队协作约定

配置共享lint规则，统一partial文件前缀。建议使用stylelint-scss插件检查语法。

// .stylelintrc
{
  "plugins": ["stylelint-scss"],
  "rules": {
    "scss/at-rule-no-unknown": true,
    "scss/selector-no-redundant-nesting-selector": true
  }
}