变量的声明与使用

约 738 字大约 2 分钟

2025-04-01

Sass 变量是存储值的容器，可以在整个样式表中重复使用，使代码更易于维护和修改。

Sass 变量可以存储以下信息：

字符串
数字
颜色值
布尔值
列表
null 值

一、变量声明

1、基本语法

$variable-name: value;

2、命名规则

以美元符号 $ 开头
名称可以包含字母、数字、下划线和连字符
遵循 kebab-case（推荐）或 camelCase （驼峰）命名约定

3、有效声明示例

// 颜色变量
$primary-color: #3498db;
$secondary-color: #2ecc71;

// 字体变量
$font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size: 16px;

// 间距变量
$spacing-unit: 1rem;
$section-padding: $spacing-unit * 2;

// 布尔值
$dark-theme: true;

二、变量的使用

1、基本用法

$brand-color: #4285f4;

.header {
  background-color: $brand-color;
}

.button {
  color: $brand-color;
  border: 1px solid $brand-color;
}

2、作用域

全局变量：在样式表顶层声明（不在任何规则内）

$global-var: "I'm global";

.class {
  content: $global-var; // 可访问
}

局部变量：在规则内声明

.container {
  $local-var: "I'm local";
  content: $local-var; // 可访问
}

.another-class {
  content: $local-var; // 错误！无法访问
}

私有变量：Sass 社区约定：以 - 或 _ 开头的变量为私有变量。结合 - 或 _ 前缀的变量名，外部无法访问，强制私有化。

_variables.scss

$-private-color: red; // 私有变量（以 `-` 或 `_` 开头）
$public-color: blue; // 公有变量

main.scss

@use "variables";

.element {
  color: variables.$public-color; // ✅ 正常访问公有变量
  // background: variables.$-private-color; // ❌ 报错：私有变量无法访问
}

3、默认值 (!default)

当变量可能被其他文件覆盖时使用：

如果变量已经被赋值，则忽略 !default 的赋值
如果变量未被赋值，则使用 !default 的值

_variables.scss

$primary-color: #3498db !default;
$secondary-color: #e74c3c !default;

style.scss

@import "variables"; // 导入库文件
$primary-color: #2c3e50; // 覆盖默认值

.button {
  background-color: $primary-color; // 将使用 #2c3e50
  color: $secondary-color; // 将使用默认的 #e74c3c
}

三、实际应用示例

1、主题系统

// 主题变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;
$light-bg: #f9f9f9;

// 使用
body {
  color: $text-color;
  background: $light-bg;
}

.button {
  background: $primary-color;
  color: white;

  &.secondary {
    background: $secondary-color;
  }
}

2、响应式设计

// 断点变量
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;

// 使用
@media (min-width: $breakpoint-md) {
  .container {
    width: 750px;
  }
}

3、数学运算

$base-spacing: 1rem;

.container {
  padding: $base-spacing;
}

.section {
  margin-bottom: $base-spacing * 2;
}

四、注意事项

变量提升：Sass 变量会被提升，可以在声明前使用
覆盖规则：后面的声明会覆盖前面的声明
不可用于选择器名：变量不能直接用于选择器名（需要使用插值 #{$var}）
类型灵活：变量可以存储任何 Sass 数据类型（颜色、字符串、数字、列表、映射等）

Sass 变量是创建可维护样式系统的强大工具，特别适合大型项目和设计系统的开发。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24