在 Sass 中，布尔型（Booleans） 是用于逻辑判断的基础数据类型，仅有 true 和 false 两个值。以下是详细的介绍和使用方法：

一、基本特性

• 值范围：仅有两个值：

  • true：表示逻辑真
  • false：表示逻辑假

• 严格区分大小写：必须全小写（true/false），True 或 TRUE 会被视为字符串。

• 用途：主要用于条件控制（如 @if、@else）和逻辑运算。

二、生成方式

1、直接赋值

$is-dark-theme: true;
$is-responsive: false;

2、比较运算

通过比较运算符生成布尔值：

5 > 3          // true
10px == 1rem   // false（单位不兼容）
"text" == text  // true（字符串不带引号时等效）

3、逻辑运算

使用逻辑运算符生成新的布尔值：

$condition: true and false; // false
$condition: true or false; // true
$condition: not true; // false

4、函数返回布尔值

部分 Sass 函数会返回布尔值，例如：

variable-exists("color")  // 检查变量是否存在
map-has-key($map, "key")  // 检查映射中是否存在键
unitless(16px)            // false（是否无单位）

三、在条件控制中的应用

1、@if / @else 语句

$is-active: true;

.button {
  @if $is-active {
    background: green;
  } @else {
    background: gray;
  }
}

2、混合宏（Mixin）中的条件控制

@mixin shadow($enable) {
  @if $enable {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

.card {
  @include shadow(true); // 应用阴影
}

3、函数中的逻辑判断

@function is-large($size) {
  @return $size > 16px;
}

.element {
  font-size: if(is-large(20px), 1.5rem, 1rem); // 1.5rem
}

四、隐式转换

虽然 Sass 支持某些值隐式转换为布尔型，但 建议显式判断 以保持代码清晰：

• 空值：null 在条件中视为 false
• 空列表/映射：() 或 map-remove($map, "key") 不会隐式转换为 false
• 字符串/数字：非空值不会自动转为 true，需用逻辑表达式判断：

  @if $string != "" { ... }  // 显式判断字符串非空

五、常见函数与操作

操作/函数	作用	示例	编译结果
逻辑运算符	and, or, not	not (5 > 3)	false
条件函数 if()	三目运算符	if(true, red, blue)	red
类型检查 type-of()	返回数据类型	type-of(true)	bool
布尔检查 is-bool()	检查是否为布尔型	is-bool("true")	false

六、实际应用场景

1、主题切换控制

$dark-mode: true;

body {
  background: if($dark-mode, #333, #fff);
  color: if($dark-mode, #fff, #333);
}

2、响应式断点开关

$enable-mobile-first: true;

@mixin respond-to($breakpoint) {
  @if $enable-mobile-first {
    @media (min-width: $breakpoint) {
      @content;
    }
  } @else {
    @media (max-width: $breakpoint) {
      @content;
    }
  }
}

3、功能模块开关

$enable-animations: false;

@mixin fade-in {
  @if $enable-animations {
    animation: fadeIn 0.3s;
  }
}

七、注意事项

1. 严格区分 true/false：
   误用大小写（如 True）会被视为字符串，导致逻辑错误。

2. 避免隐式转换陷阱：

   @if "false" { ... }  // 条件为真（字符串非空）
   @if 0 { ... }        // 条件为真（数字非零）

   应始终用布尔值直接判断。

3. 结合空值使用：
   可通过 null 和布尔值组合实现复杂逻辑：

   $variant: null;
   @if $variant != null and $variant == "dark" { ... }

掌握布尔型的使用，可以显著提升 Sass 代码的逻辑控制能力，尤其是在主题系统、响应式设计和功能模块化中。通过条件判断，实现更灵活的样式生成！ 🔄

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24