Sass 变量 $

在 Sass 中，变量是一种非常强大的功能，它允许你存储一个值并在你的样式表中重复使用。变量可以是任何 CSS 属性的值，比如颜色、尺寸或字体族等。通过使用变量，你可以轻松地维护和更新你的样式，确保在整个项目中保持一致。

定义变量

变量以 $ 符号开始，并且可以包含字母、数字以及 - 和 _ 字符。变量名应该具有描述性，以便于理解其用途。例如：

$primary-color: #007bff;
$font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$base-padding: 1rem;

这里定义了三个变量：一个是颜色变量 $primary-color，一个是字体堆栈变量 $font-stack，另一个是基础填充变量 $base-padding。这些变量可以在整个样式表中被引用。

使用变量

一旦定义了一个变量，就可以在你的样式规则中使用它。例如：

body {
    background-color: $primary-color;
    font-family: $font-stack;
    padding: $base-padding;
}

在这个例子中，我们使用了前面定义的三个变量来设置 body 元素的背景色、字体和内边距。这使得修改这些属性变得非常简单——只需更改变量的值，所有引用该变量的地方都会自动更新。

变量的作用域

Sass 支持局部变量和全局变量的概念。局部变量只在定义它的块内可见，而全局变量则在整个样式表中都可用。

全局变量

全局变量是在任何地方都可以访问的变量。它们通常在文件的顶部定义，以确保在整个项目中都能使用。

$global-color: red;

.container {
    color: $global-color;
}

局部变量

局部变量只能在其声明的代码块中使用。尝试在局部变量之外访问它会导致编译错误。

.container {
    $local-color: blue;
    color: $local-color;
}

// 尝试在这里使用 $local-color 会导致错误

变量嵌套

Sass 允许在嵌套的选择器中定义变量，这意味着你可以根据需要将变量与特定的部分相关联。

-- -------------------- ---- -------
---- -
    ----------- -----
    ------ -----------
    
    -- -
        -- -
            - -
                ------ -----------
            -
        -
    -
-

在这个例子中，$nav-color 变量被用于 .nav 及其子选择器中的颜色设置。

变量的默认值

Sass 提供了一种设置默认变量值的方法，这样即使变量未被显式定义，也能为它提供一个默认值。这在创建可重用的模块时特别有用。

$default-font-size: 16px !default;

body {
    font-size: $default-font-size;
}

在这个例子中，如果 $default-font-size 没有被定义，那么它将使用默认值 16px。

通过理解和应用上述关于 Sass 变量的知识，你可以更有效地管理和组织你的 CSS，使代码更加简洁、易于维护。变量不仅提高了效率，还增强了代码的可读性和可维护性，特别是在大型项目中。