变量与作用域

变量让 CSS 具备动态能力，作用域决定变量的可见范围。

Sass 变量

定义与使用

// 定义变量
$primary-color: #3498db;
$font-size: 14px;
$border-radius: 4px;

// 使用变量
.button {
  background: $primary-color;
  font-size: $font-size;
  border-radius: $border-radius;
}

变量类型

// 数字
$spacing: 20px;
$opacity: 0.5;

// 字符串
$font-family: 'Helvetica Neue', Arial, sans-serif;

// 颜色
$primary: #3498db;
$secondary: rgb(46, 204, 113);
$gradient: linear-gradient(to right, red, blue);

// 布尔值
$rounded: true;

// 列表
$breakpoints: 576px, 768px, 992px, 1200px;
$colors: primary success warning danger;

// Map
$theme: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

// Null
$unused: null;

变量插值

$name: button;
$property: margin;

.#{$name} {
  #{$property}: 10px;
}

// 编译结果
// .button { margin: 10px; }

Less 变量

定义与使用

// 定义变量
@primary-color: #3498db;
@font-size: 14px;

.button {
  background: @primary-color;
  font-size: @font-size;
}

属性作为变量

// Less 特有：使用 $ 引用属性值
.container {
  width: 100px;
  height: $width;  // 引用上面的 width
}

变量延迟加载

// Less 变量延迟加载（最后定义的值生效）
.container {
  color: @color;  // blue（最后一个定义）
}
@color: red;
@color: blue;

作用域规则

Sass 作用域

// 全局变量
$color: red;

.container {
  // 局部变量（覆盖全局）
  $color: blue;
  color: $color;  // blue
}

.box {
  color: $color;  // red（全局变量不变）
}

// !global 强制全局
.container {
  $color: blue !global;
}

.box {
  color: $color;  // blue（被修改为全局）
}

// !default 默认值（变量未定义时生效）
$primary: #3498db !default;
$primary: #e74c3c;  // 已定义，不使用默认值

.button {
  background: $primary;  // #e74c3c
}

Less 作用域

// Less 作用域类似 JS
@color: red;

.container {
  @color: blue;
  color: @color;  // blue（局部覆盖）
}

.box {
  color: @color;  // red
}

// 块级作用域
.container {
  @color: blue;
  .inner {
    color: @color;  // blue（继承外部）
    @color: green;
    color: @color;  // green（延迟加载）
  }
}

作用域对比

实用模式

主题变量

// Sass：Map + 变量
$themes: (
  light: (
    bg: #fff,
    text: #333
  ),
  dark: (
    bg: #222,
    text: #fff
  )
);

@mixin theme($name) {
  $theme: map-get($themes, $name);
  background: map-get($theme, bg);
  color: map-get($theme, text);
}

.light-mode { @include theme(light); }
.dark-mode { @include theme(dark); }

配置覆盖

// _variables.scss（默认配置）
$primary: #3498db !default;
$secondary: #2ecc71 !default;

// config.scss（项目配置）
$primary: #e74c3c;  // 覆盖默认值

// main.scss
@use 'variables';
.button {
  background: variables.$primary;  // #e74c3c
}

响应式断点

// Sass：Map 定义断点
$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@mixin respond-to($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  @media (min-width: $value) {
    @content;
  }
}

.container {
  @include respond-to(md) {
    max-width: 720px;
  }
}

间距系统

// Less：生成间距工具类
@spacing-base: 4px;
@spacing-levels: 0, 1, 2, 3, 4, 5, 6, 8;

.each-spacing(@list, @i: 1) when (@i =< length(@list)) {
  @level: extract(@list, @i);
  @value: @spacing-base * @level;

  .mt-@{level} { margin-top: @value; }
  .mb-@{level} { margin-bottom: @value; }
  .ml-@{level} { margin-left: @value; }
  .mr-@{level} { margin-right: @value; }

  .each-spacing(@list, @i + 1);
}

.each-spacing(@spacing-levels);

注意事项

避免变量污染

// 差：全局变量过多
$color1: red;
$color2: blue;
$spacing1: 10px;

// 好：使用 Map 组织
$colors: (
  primary: #3498db,
  secondary: #2ecc71
);

$spacing: (
  small: 4px,
  medium: 8px,
  large: 16px
);

命名规范

// 推荐：语义化命名
$color-primary: #3498db;
$color-secondary: #2ecc71;
$font-size-base: 14px;
$font-size-lg: 18px;
$spacing-md: 16px;

// 避免：无意义命名
$color1: #3498db;
$color2: #2ecc71;

要点总结

• Sass 变量用 $，Less 用 @
• Sass 支持 !global 和 !default
• Less 支持延迟加载和属性引用 $
• 使用 Map 组织相关变量，避免全局污染
• 变量命名应语义化，便于维护
• 配置覆盖使用 !default 模式