Sass 变量与数据类型

Sass提供了丰富的数据类型和灵活的变量系统，使样式开发更加动态和可维护。本章将详细介绍Sass中的变量和各种数据类型。

变量 (Variables)

变量定义与使用

Sass使用$符号定义变量，变量可以存储各种类型的值：

scss

// 颜色变量
$primary-color: #3498db;
$secondary-color: rgb(46, 204, 113);
$text-color: hsl(0, 0%, 20%);

// 数值变量
$font-size: 16px;
$line-height: 1.5;
$border-width: 2px;

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

// 布尔变量
$enable-rounded: true;
$enable-shadow: false;

// 使用变量
.button {
  background-color: $primary-color;
  font-size: $font-size;
  font-family: $font-family;
  border-radius: if($enable-rounded, 4px, 0);
  box-shadow: if($enable-shadow, 0 2px 4px rgba(0,0,0,0.1), none);
}

变量作用域

scss

$global-var: 'global';

.component {
  $local-var: 'local';
  color: $global-var; // 'global'
  
  .nested {
    color: $global-var; // 'global'
    // color: $local-var; // 错误：无法访问父级的局部变量
  }
}

// 在全局作用域中定义变量
$another-global: 'value';

变量的动态性

scss

$color: blue;

// 变量在使用时才会被求值
.content {
  $color: red; // 重新赋值
  color: $color; // red
}

.sidebar {
  color: $color; // blue (因为重新赋值只在.content作用域内有效)
}

数据类型详解

1. 数字 (Numbers)

Sass支持带单位和不带单位的数字：

scss

// 无单位数字
$ratio: 1.5;
$count: 10;

// 带单位数字
$width: 100px;
$height: 50%;
$opacity: 0.8;
$angle: 45deg;
$duration: 2s;
$easing: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

// 数学运算
$container-width: 1200px;
$gutter: 20px;
$column-width: ($container-width - ($gutter * 3)) / 4;

.grid-item {
  width: $column-width;
  margin: $gutter / 2;
}

2. 字符串 (Strings)

Sass支持带引号和不带引号的字符串：

scss

// 带引号字符串
$font-family: "Helvetica Neue", Arial, sans-serif;
$message: "Hello World";

// 不带引号字符串
$property: border;
$unit: px;

// 字符串操作
$base-url: "https://example.com";
$image-path: "#{$base-url}/images/";

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

// 字符串函数
$full-name: 'button';
$modifier: 'primary';

$full-class: #{$full-name}-#{$modifier}; // 'button-primary'

.element {
  // 使用字符串插值
  content: "Class: #{$full-class}";
}

3. 颜色 (Colors)

Sass支持多种颜色格式，并提供颜色操作函数：

scss

// 不同颜色格式
$red-hex: #ff0000;
$red-rgb: rgb(255, 0, 0);
$red-hsl: hsl(0, 100%, 50%);
$red-named: red;

// 颜色操作
$primary: #3498db;
$primary-lighter: lighten($primary, 20%);
$primary-darker: darken($primary, 20%);
$primary-transparent: rgba($primary, 0.5);

// 颜色函数示例
$base-color: #3498db;

.color-variants {
  background-color: $base-color;
  border-color: adjust-hue($base-color, 15);
  color: complement($base-color);
  outline-color: mix($base-color, white, 50%);
}

4. 布尔值 (Booleans)

scss

$enable-animations: true;
$enable-rtl: false;
$has-border: true;

.element {
  @if $enable-animations {
    animation: slideIn 0.3s ease;
  }
  
  @if $has-border {
    border: 1px solid #ccc;
  }
  
  direction: if($enable-rtl, rtl, ltr);
}

5. 空值 (Null)

scss

$optional-value: null;
$another-value: #333;

.element {
  // null值在CSS中会被忽略
  color: $optional-value; // 不会产生color属性
  background-color: $another-value; // 会产生background-color属性
  
  // 检查null值
  @if $optional-value {
    font-weight: bold;
  } @else {
    font-weight: normal; // 这个会执行，因为null为假
  }
}

复杂数据类型

6. 列表 (Lists)

列表是Sass中存储多个值的方式：

scss

// 定义列表
$font-stack: Helvetica, Arial, sans-serif;
$primary-colors: red blue green;
$numbers: 1 2 3 4 5;
$mixed: 10px solid #f00;

// 列表分隔符
$comma-list: foo, bar, baz;
$space-list: foo bar baz;

// 使用nth函数获取列表元素
$first-font: nth($font-stack, 1); // Helvetica
$second-color: nth($primary-colors, 2); // blue

// 获取列表长度
$list-length: length($font-stack); // 3

// 遍历列表
@each $color in $primary-colors {
  .bg-#{$color} {
    background-color: $color;
  }
}

// 列表操作
$new-list: append($primary-colors, yellow); // red blue green yellow
$combined: join($primary-colors, (purple, orange)); // red blue green purple orange

// 生成网格类
$columns: 1 2 3 4 5 6 7 8 9 10 11 12;

@each $col in $columns {
  .col-#{$col} {
    width: percentage($col / 12);
  }
}

7. 映射 (Maps)

映射是键值对的集合：

scss

// 定义映射
$theme-colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "danger": #dc3545,
  "warning": #ffc107,
  "info": #17a2b8
);

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

// 使用map-get获取值
$primary-color: map-get($theme-colors, "primary");
$lg-breakpoint: map-get($breakpoints, "lg");

// 遍历映射
@each $name, $color in $theme-colors {
  .btn-#{$name} {
    background-color: $color;
    border-color: $color;
    
    &:hover {
      background-color: darken($color, 10%);
      border-color: darken($color, 10%);
    }
  }
}

// 遍历断点
@each $name, $breakpoint in $breakpoints {
  @if $name != "xs" {
    @media (min-width: $breakpoint) {
      .#{$name}-hidden {
        display: none;
      }
    }
  }
}

// 映射函数
$updated-colors: map-merge($theme-colors, (
  "light": #f8f9fa,
  "dark": #343a40
));

// 检查键是否存在
@if map-has-key($theme-colors, "primary") {
  .has-primary {
    color: map-get($theme-colors, "primary");
  }
}

变量高级用法

使用 !default 标志

scss

// 定义默认值
$primary-color: #3498db !default;
$font-size: 16px !default;
$border-radius: 4px !default;

// 在其他地方可以覆盖默认值
$primary-color: #e74c3c; // 这会覆盖默认值
$font-size: 18px !default; // 这不会覆盖，因为$font-size已定义

.element {
  color: $primary-color; // #e74c3c
  font-size: $font-size; // 16px (默认值)
}

使用 !global 标志

scss

$global-var: initial;

.component {
  $global-var: local-value !global; // 全局修改变量
  color: $global-var; // local-value
}

// 在组件外部
.outside {
  color: $global-var; // local-value (因为被全局修改了)
}

条件变量定义

scss

$theme: dark;

// 根据条件设置变量
@if $theme == dark {
  $text-color: white;
  $bg-color: #333;
} @else {
  $text-color: #333;
  $bg-color: white;
}

.card {
  background-color: $bg-color;
  color: $text-color;
}

实用示例

响应式设计变量

scss

// 断点变量
$breakpoints: (
  "mobile": 320px,
  "mobile-lg": 480px,
  "tablet": 768px,
  "tablet-lg": 1024px,
  "desktop": 1200px,
  "desktop-lg": 1400px
);

// 媒体查询混合宏
@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// 使用示例
.container {
  width: 100%;
  padding: 1rem;
  
  @include respond-to(tablet) {
    max-width: 750px;
    padding: 1.5rem;
  }
  
  @include respond-to(desktop) {
    max-width: 1200px;
    padding: 2rem;
  }
}

主题系统

scss

// 主题配置
$themes: (
  light: (
    bg-color: white,
    text-color: #333,
    border-color: #ddd
  ),
  dark: (
    bg-color: #333,
    text-color: white,
    border-color: #555
  )
);

// 获取主题值的函数
@function theme-color($theme, $key) {
  @return map-get(map-get($themes, $theme), $key);
}

// 使用主题
.light-theme {
  background-color: theme-color(light, bg-color);
  color: theme-color(light, text-color);
  border: 1px solid theme-color(light, border-color);
}

.dark-theme {
  background-color: theme-color(dark, bg-color);
  color: theme-color(dark, text-color);
  border: 1px solid theme-color(dark, border-color);
}

Sass的变量和数据类型系统提供了强大的功能，使您能够创建动态、可维护和可扩展的样式系统。

Sass 变量与数据类型 #

变量 (Variables) #

变量定义与使用 #

变量作用域 #

变量的动态性 #

数据类型详解 #

1. 数字 (Numbers) #

2. 字符串 (Strings) #

3. 颜色 (Colors) #

4. 布尔值 (Booleans) #

5. 空值 (Null) #

复杂数据类型 #

6. 列表 (Lists) #

7. 映射 (Maps) #

变量高级用法 #

使用 !default 标志 #

使用 !global 标志 #

条件变量定义 #

实用示例 #

响应式设计变量 #

主题系统 #

Sass 变量与数据类型

变量 (Variables)

变量定义与使用

变量作用域

变量的动态性

数据类型详解

1. 数字 (Numbers)

2. 字符串 (Strings)

3. 颜色 (Colors)

4. 布尔值 (Booleans)

5. 空值 (Null)

复杂数据类型

6. 列表 (Lists)

7. 映射 (Maps)

变量高级用法

使用 !default 标志

使用 !global 标志

条件变量定义

实用示例

响应式设计变量

主题系统