SASS 变量
本文将讲解 SASS 变量。
我们将详细说明 SASS 变量，并一步步学习它们的实际用法。
YouTube Video
SASS 变量
SASS 是一种 CSS 扩展语言，使你能够更灵活和高效地编写 CSS。在其众多功能中，变量是维护样式一致性并简化更改的强大工具。
什么是 SASS 变量？
SASS 变量可以用来存储在 CSS 中经常使用的颜色、字体大小和间距等值，使这些值可以集中管理。
通过使用变量，你可以轻松更改样式并提高代码的可读性。
如何书写变量
变量可以如下书写。
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- 你需要在变量名前加
$符号。 variable-name是变量的名称。建议为它起一个清晰且有描述性的名字。value是分配给变量的值。
变量的基本用法
下面是一个 SASS 变量的基本示例。
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- 一旦定义了像
$primary-color这样的变量，你就可以多次复用相同的值。 - 当需要更改值时，你只需修改变量的定义，从而提升可维护性。
生成的 CSS 输出
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}在嵌套中使用变量
将 SASS 嵌套与变量结合使用，可以帮助整理代码并更易于管理。
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- 你可以在嵌套选择器中使用变量。
- 通过组合变量，您可以实现灵活的样式，例如使用
color.adjust函数使颜色变深10%。
生成的 CSS 输出
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}具有默认值的变量
在 SASS 中，你可以为变量设置默认值。设置默认值可以让你在不覆盖已存在变量的情况下使用变量。
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}- 通过添加
!default，如果变量已被定义则不会被覆盖。 - 这在团队开发或项目全局设置中很有用。
生成的 CSS 输出
1p {
2 font-size: 16px;
3}变量的作用域
SASS 变量具有作用域，其可用性取决于定义的位置。了解作用域有助于防止变量被意外覆盖。
- 全局作用域
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- 全局作用域中的变量在整个文件中都可用。
- 局部作用域
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- 局部作用域中的变量仅在特定嵌套或文件内可用。
在计算中使用变量
SASS 变量也可以用于计算。也可以对带单位的值和颜色进行计算。
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}生成的 CSS 输出
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- 使用变量进行颜色调整或间距计算可以提高可维护性。
总结
SASS 变量是高效管理和维护 CSS 的关键功能。
使用 SASS 变量有助于在整个项目中保持样式一致，并方便进行更改。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。