Sass CSS中定义变量|极客教程

Sass CSS中定义变量

在CSS中，我们经常会遇到多次使用同一个数值或颜色的情况，这时候如果能将这些数值或颜色定义成一个变量，就可以很方便的在整个样式表中进行统一管理和修改。Sass是一种CSS预处理器，提供了一种定义变量的功能，可以让我们在样式表中轻松地使用变量来提高代码的可维护性和可重用性。

为什么要使用变量

在CSS中，如果多次使用同一个数值或颜色，我们需要在每次使用时都写出完整的值，这样不仅增加了代码的冗余，也降低了代码的可维护性。通过使用变量，我们可以将这些重复的值统一管理在一个地方，只需要修改变量的值，就可以一次性地改变所有使用到这个变量的地方，极大地提高了代码的可维护性。

另外，通过变量的使用，我们还可以使代码更具有语义化，提高了代码的可读性和可理解性。在样式表中使用变量可以使代码更加清晰明了，让其他开发人员能够更容易地理解我们的代码。

在Sass中定义变量

在Sass中，定义变量非常简单，只需使用$符号并给变量取一个名称，然后使用:符号来赋值。例如：

$primary-color: #1E90FF;
$font-size: 16px;

在上面的示例中，我们定义了两个变量$primary-color和$font-size，分别表示主色和字体大小。在实际使用时，只需要通过变量名来引用这些数值，而无需重复书写。

在样式表中使用变量

定义了变量之后，我们就可以在样式表中方便地使用这些变量了。在Sass中，可以通过$变量名的方式来引用变量。例如：

body {
  color:  $primary-color; font-size:$ font-size;
}

在上面的示例中，我们将$primary-color变量的值赋给了color属性，将$font-size变量的值赋给了font-size属性。这样一来，我们就可以很轻松地统一管理和修改这些数值了。

变量的作用域

在Sass中，变量有两种作用域：全局作用域和局部作用域。全局作用域的变量在整个样式表中都可以访问，而局部作用域的变量只能在定义它的规则块内部访问。例如：

$global-variable: #333;

.foo {
  $local-variable: #666;
  color: $global-variable; // 可以访问全局变量
  background-color: $local-variable; // 可以访问局部变量
}

.bar {
  // 无法访问局部变量$local-variable
  color: $global-variable; // 可以访问全局变量
}

在上面的示例中，.foo规则块中可以访问全局变量$global-variable和局部变量$local-variable，而.bar规则块中只能访问全局变量$global-variable。

示例代码

下面是一个简单的示例代码，演示了如何在Sass中定义和使用变量：

$primary-color: #1E90FF;
$font-size: 16px;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
  font-size: $font-size;
}

a {
  color: $primary-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

编译成CSS后的结果如下：

body {
  font-family: Arial, sans-serif;
  color: #1E90FF;
  font-size: 16px;
}

a {
  color: #1E90FF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

通过上面的示例，我们可以看到，通过使用变量，我们可以在整个样式表中方便地管理和修改数值，提高代码的可维护性和可读性。