【SCSS入门】4、变量的使用

【SCSS入门】变量的使用

---

系列文章目录

【SCSS入门】1、什么是SCSS？
【SCSS入门】2、安装和配置SCSS环境
【SCSS入门】3、SCSS的基本语法
【SCSS入门】4、变量的使用（本文）
【SCSS入门】5、嵌套规则
【SCSS入门】6、部分文件和导入
【SCSS入门】7、混合宏（Mixins）
【SCSS入门】8、继承（Inheritance）
【SCSS入门】9、运算和函数
【SCSS入门】10、编译和调试SCSS

---

在前面的文章中，我们了解了SCSS的基本语法。本章将深入探讨SCSS中的变量使用，帮助你在样式开发中提高代码的复用性和可维护性。

变量的概述

SCSS允许你定义变量来存储CSS值，如颜色、字体、尺寸等。使用变量可以使你的样式代码更加模块化和一致，便于维护和更新。SCSS变量使用 $ 符号定义，并可以在整个样式文件中引用。

变量的定义和使用

示例：定义和使用变量

$primary-color: #333;
$secondary-color: #666;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

h1 {
  color: $secondary-color;
}

在上面的示例中，我们定义了三个变量 $primary-color、$secondary-color 和 $font-stack，并在 body 和 h1 样式中使用这些变量。

变量的作用域

在SCSS中，变量的作用域有两种：全局作用域和局部作用域。全局变量可以在整个样式文件中使用，而局部变量只在其定义的代码块中有效。

1. 全局作用域

全局变量在整个样式文件中都可以访问。

示例：全局变量

$primary-color: #333;

body {
  color: $primary-color;
}

h1 {
  color: $primary-color;
}

2. 局部作用域

局部变量只在其定义的代码块中有效，不能在代码块外部访问。

示例：局部变量

body {
  $secondary-color: #666;
  color: $secondary-color;
}

h1 {
  // 下面的代码会报错，因为 $secondary-color 只在 body 代码块内有效
  // color: $secondary-color;
}

3. 使用 !global 声明全局变量

即使在局部作用域中定义变量，也可以使用 !global 声明将变量提升为全局变量。

示例：使用 !global 声明全局变量

body {
  $secondary-color: #666 !global;
  color: $secondary-color;
}

h1 {
  color: $secondary-color; // 现在可以访问 $secondary-color
}

变量的默认值

SCSS允许你为变量设置默认值，如果变量已经定义，则保留原值。使用 !default 关键字来设置默认值。

示例：变量的默认值

$primary-color: #333;

$primary-color: #666 !default; // 如果 $primary-color 已经定义，则保留原值

body {
  color: $primary-color; // 输出 #333
}

变量的动态计算

SCSS变量可以进行数学运算和动态计算，使样式更加灵活和动态。

示例：变量的动态计算

$base-font-size: 16px;
$large-font-size: $base-font-size * 1.5;

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

h1 {
  font-size: $large-font-size;
}

在上面的示例中，我们定义了一个基础字体大小 $base-font-size，并通过运算生成一个较大的字体大小 $large-font-size。

颜色变量

SCSS中的颜色变量可以通过内置的颜色函数进行操作，如lighten、darken、mix等。

示例：颜色变量和函数

$primary-color: #3498db;
$secondary-color: lighten($primary-color, 20%);
$tertiary-color: darken($primary-color, 20%);

body {
  background-color: $primary-color;
  color: $secondary-color;
}

a {
  color: $tertiary-color;
}

在上面的示例中，我们使用 lighten 和 darken 函数对颜色变量进行操作，生成不同的颜色值。

一个完整的示例

为了更好地理解变量的使用，我们来看一个完整的SCSS示例，展示如何定义和使用变量。

项目结构

scss/
├── _variables.scss
└── style.scss

_variables.scss

$primary-color: #3498db;
$secondary-color: lighten($primary-color, 20%);
$tertiary-color: darken($primary-color, 20%);
$font-stack: Helvetica, sans-serif;
$base-font-size: 16px;
$large-font-size: $base-font-size * 1.5;
$border-radius: 5px;

style.scss

@import 'variables';

body {
  font: 100% $font-stack;
  background-color: $primary-color;
  color: $secondary-color;
}

h1 {
  font-size: $large-font-size;
  color: $tertiary-color;
}

button {
  background-color: $primary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: $border-radius;
  &:hover {
    background-color: $secondary-color;
  }
}

编译SCSS

在项目目录下运行以下命令，将SCSS文件编译为CSS文件：

sass scss/style.scss css/style.css

生成的 style.css 文件内容如下：

body {
  font: 100% Helvetica, sans-serif;
  background-color: #3498db;
  color: #5dade2;
}

h1 {
  font-size: 24px;
  color: #2874a6;
}

button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #5dade2;
}

结论

通过本文的讲解，你应该已经掌握了SCSS中变量的使用。我们详细介绍了变量的定义和使用、变量的作用域、默认值、动态计算以及颜色变量等内容，帮助你编写更加模块化和可维护的样式代码。

这些就是关于【SCSS入门】变量的使用的详细介绍。
这里是爪磕，感谢您的到来与关注，我们将持续为您带来优质的文章。