Sass 变量 #

什么是变量？ #

变量是存储信息的容器，可以在整个样式表中重复使用。Sass 使用 $ 符号来定义变量。

scss

$primary-color: #3498db;
$font-size: 16px;

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

变量定义 #

基本语法 #

scss

$variable-name: value;

命名规则 #

scss

// 有效命名
$color: red;
$primary-color: blue;
$font_size: 14px;  // 下划线
$fontSize: 14px;   // 驼峰
$font-size: 14px;  // 连字符（推荐）

// 无效命名
$1color: red;      // 不能以数字开头
$@color: blue;     // 不能包含特殊字符

命名约定 #

scss

// 语义化命名（推荐）
$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333;
$border-color: #ccc;

// 功能性命名
$font-size-base: 16px;
$font-size-sm: 14px;
$font-size-lg: 18px;

// 状态命名
$color-success: #2ecc71;
$color-warning: #f39c12;
$color-danger: #e74c3c;
$color-info: #3498db;

变量作用域 #

全局变量 #

在任何嵌套层级之外定义的变量是全局变量：

scss

$global-color: blue;  // 全局变量

.container {
  color: $global-color;  // 可以访问
}

.item {
  color: $global-color;  // 可以访问
}

局部变量 #

在代码块内定义的变量是局部变量：

scss

.container {
  $local-color: red;  // 局部变量
  color: $local-color;  // 可以访问
}

.item {
  color: $local-color;  // 错误！无法访问
}

变量遮蔽 #

局部变量可以遮蔽全局变量：

scss

$color: blue;

.container {
  $color: red;  // 遮蔽全局变量
  color: $color;  // red
}

.item {
  color: $color;  // blue（全局变量）
}

!global 标志 #

使用 !global 将局部变量提升为全局变量：

scss

.container {
  $color: red !global;  // 创建全局变量
  color: $color;
}

.item {
  color: $color;  // red（可以访问）
}

!default 标志 #

使用 !default 设置默认值，如果变量已存在则不覆盖：

scss

$color: blue;

.container {
  $color: red !default;  // 不会覆盖
  color: $color;  // blue
}

// 常用于可配置的主题
$theme-color: #3498db !default;

.button {
  background-color: $theme-color;
}

变量数据类型 #

数字 #

scss

$width: 100px;
$height: 50%;
$margin: 1.5em;
$opacity: 0.8;  // 无单位数字

.container {
  width: $width;
  height: $height;
  margin: $margin;
  opacity: $opacity;
}

字符串 #

scss

$font-family: Helvetica, sans-serif;
$direction: left;
$image-path: "../images";

.container {
  font-family: $font-family;
  float: $direction;
  background-image: url("#{$image-path}/bg.png");
}

颜色 #

scss

// 十六进制
$color-hex: #3498db;

// RGB
$color-rgb: rgb(52, 152, 219);

// RGBA
$color-rgba: rgba(52, 152, 219, 0.8);

// HSL
$color-hsl: hsl(204, 70%, 53%);

// 颜色名称
$color-name: steelblue;

.element {
  color: $color-hex;
  background-color: $color-rgba;
}

布尔值 #

scss

$rounded: true;
$shadow: false;

@mixin card($rounded: true) {
  @if $rounded {
    border-radius: 8px;
  }
}

列表 #

scss

$border: 1px solid #ccc;
$padding: 10px 20px;
$font-stack: Helvetica, Arial, sans-serif;
$breakpoints: 576px, 768px, 992px, 1200px;

.container {
  border: $border;
  padding: $padding;
  font-family: $font-stack;
}

映射(Maps) #

scss

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  background-color: map-get($colors, primary);
}

空值 #

scss

$var: null;

.element {
  // null 不会输出任何内容
  margin: $var;
}

变量插值 #

使用 #{} 进行变量插值：

选择器插值 #

scss

$name: "container";

.#{$name} {
  width: 100%;
}

// 编译后
.container {
  width: 100%;
}

属性名插值 #

scss

$prop: margin;

.element {
  #{$prop}-top: 10px;
  #{$prop}-bottom: 10px;
}

// 编译后
.element {
  margin-top: 10px;
  margin-bottom: 10px;
}

URL 插值 #

scss

$path: "../images";

.logo {
  background-image: url("#{$path}/logo.png");
}

// 编译后
.logo {
  background-image: url("../images/logo.png");
}

计算表达式插值 #

scss

$base: 10;

.element {
  width: #{$base + 5}px;
}

// 编译后
.element {
  width: 15px;
}

变量运算 #

数学运算 #

scss

$base-width: 100px;

.container {
  width: $base-width + 20;      // 120px
  width: $base-width - 20;      // 80px
  width: $base-width * 2;       // 200px
  width: $base-width / 2;       // 50px
  width: ($base-width / 2);     // 50px（推荐加括号）
}

颜色运算 #

scss

$color: #3498db;

.element {
  color: $color;
  background-color: lighten($color, 10%);  // 变亮
  border-color: darken($color, 10%);       // 变暗
}

实际应用示例 #

主题配置 #

scss

// _variables.scss
$themes: (
  light: (
    bg: #ffffff,
    text: #333333,
    primary: #3498db
  ),
  dark: (
    bg: #1a1a1a,
    text: #ffffff,
    primary: #2980b9
  )
);

// 使用
@function theme-color($theme, $key) {
  @return map-get(map-get($themes, $theme), $key);
}

body {
  background-color: theme-color(light, bg);
  color: theme-color(light, text);
}

响应式断点 #

scss

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

.container {
  padding: 15px;
  
  @include respond-to(md) {
    padding: 30px;
  }
}

字体系统 #

scss

$font-sizes: (
  xs: 0.75rem,    // 12px
  sm: 0.875rem,   // 14px
  base: 1rem,     // 16px
  lg: 1.125rem,   // 18px
  xl: 1.25rem,    // 20px
  2xl: 1.5rem,    // 24px
  3xl: 1.875rem,  // 30px
  4xl: 2.25rem    // 36px
);

@function font-size($size) {
  @return map-get($font-sizes, $size);
}

.heading {
  font-size: font-size(2xl);
}

间距系统 #

scss

$spacer: 1rem;

$spacers: (
  0: 0,
  1: $spacer * 0.25,   // 4px
  2: $spacer * 0.5,    // 8px
  3: $spacer,          // 16px
  4: $spacer * 1.5,    // 24px
  5: $spacer * 3       // 48px
);

@function spacer($level) {
  @return map-get($spacers, $level);
}

.section {
  padding: spacer(4);
  margin-bottom: spacer(3);
}

变量最佳实践 #

1. 集中管理 #

scss

// _variables.scss
// 颜色
$color-primary: #3498db;
$color-secondary: #2ecc71;

// 字体
$font-family-base: Helvetica, sans-serif;
$font-size-base: 16px;

// 间距
$spacing-unit: 8px;

2. 语义化命名 #

scss

// 好
$color-primary: #3498db;
$color-text: #333;
$color-border: #ccc;

// 不好
$blue: #3498db;
$dark-gray: #333;
$light-gray: #ccc;

3. 使用映射组织相关变量 #

scss

// 好
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  text: #333
);

// 不好
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-text: #333;

4. 避免魔法数字 #

scss

// 好
$border-radius: 4px;
$transition-duration: 0.3s;

.button {
  border-radius: $border-radius;
  transition: all $transition-duration;
}

// 不好
.button {
  border-radius: 4px;
  transition: all 0.3s;
}

下一步 #

掌握了变量后，继续学习嵌套规则，让样式编写更加简洁！