解释如何在 SASS 中定义变量

SASS 是语法很棒的样式表的缩写形式，它是级联样式表 (CSS) 的扩展。它是 CSS 的预处理器。它被编译为 CSS 并且与每个版本的 CSS 完全兼容。 Sass 减少了 CSS 的重复，从而节省了时间。它允许使用变量、嵌套规则、mixin、函数等，所有这些都具有完全兼容 CSS 的语法。它有助于以组织良好的方式组织复杂且大型结构化样式表，从而促进代码的可重用性。它是由 Hampton Catlin 设计并由 Natalie Weizenbaum 和 Chris Eppstein 于 2006 年开发的开源免费扩展。

Sass 引入了一些 CSS 中不存在的特性，例如可用于存储数据或信息的变量，以便以后使用。这是 Sass 的一个重要特性。在本文中，我们将学习如何在 Sass 中定义变量，并通过示例了解其实现。

萨斯变量：

• Sass 变量被声明一次以存储可以在需要时重用的数据。
• 如果您修改一次变量值，则无论何时使用变量，更改都会反映在所有位置。
• 在 Sass 中，我们可以存储多种类型的数据，例如数字、字符串、布尔值、列表、空值等。
• Sass 使用美元符号 ($) 来声明一个变量，后跟指定的变量名，该变量的值用冒号 (:) 分隔。该行必须以分号 (;) 结尾。这些变量也可以与其他值一起使用。
• 您还可以使用下划线 (_) 或连字符 (-) 来声明描述性变量名称。
• 我们可以通过对变量执行多次数学运算来提高 Sass 的效率。

句法：

$var_Name : var-value;

示例：以下示例将演示如何在 SASS 中定义变量。

文件名： style.scss

// Global variable declaration
$global__light: #f9f9f9;
$global__dark: #000;
$global__font: ("Poppins");
$global__f_size: 26;
$global__Max_width: 1280px;

div {
  $local__green: #00f034;
 
  // Global variable called
  color: $global__dark;
  border: 1px solid $local__green;
  font: $global__font;

  // Global variable called
  max-width: $global__Max_width;
}

$global_sky: #0000ff;

p {

  // Local variable declare
  $local__margin: 10px 5px 20px 0;
  color: $global__dark;
  border: 1px solid $global_sky;
  font-size: $global__f_size;

  // Local variable called
  margin: $local__margin;
}

输出：生成的 CSS 输出将是：

文件名： 样式.css

div {

  /* Global variable called */
  color: #000;
  border: 1px solid #00f034;
  font-family: "Poppins";

  /* Global variable called */
  max-width: 1280px;
}

p {
  color: #000;
  border: 1px solid #0000ff;
  font-size: 26;

  /* Local variable called */
  margin: 10px 5px 20px 0;
}

/*# sourceMappingURL=style.css.map */

示例：此示例说明了编译为 CSS 变量并定义其范围的 SASS 变量。

HTML

  

    
    

  

    
Welcome to GeeksforGeeks
    
A Computer Science portal for geeks.

  

输出：

Sass 变量的作用域：和其他语言一样，Sass 也有作用域的概念。在 Sass 中，您可以通过以下两种方式声明变量的范围：

• 全局变量
• 局部变量

示例：在这里，我们可以看到如何使用 Sass 变量的作用域。

• 全局变量范围：全局变量在文件顶部声明，您可以在代码中的任何位置使用它们。您还可以使用!global将局部变量声明为全局变量。

文件名： style.scss

// It is a global variable
$clr_primary: #a9a5f4;

div {

  // Local variable with global scope
  $clr_dark: #000 !global;
  background-color: $clr_primary;
}

p {
  background-color: $clr_dark;
}

生成的 CSS 输出将是：

文件名： style.css

div {

  // Here, clr_primary variable assigned
  background-color: #a9a5f4;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}

• 局部变量：在块中或用括号 {} 声明的变量，即在花括号内，是局部变量，您不能在该特定块的范围之外使用它们。

如果您尝试在作用域外使用变量，则会生成错误消息“编译错误：未定义变量”，如下例所示。

div {
  $clr__dark: #000; // local variable
  background-color: $clr_dark;
}

p {

  // We cannot use this variable here.
  // It will throw an error.
  background-color: $clr_dark;
}

样式.scss：

div {

  // Local variable scope
  $clr_light: #f9f9f9;
  background-color: $clr_light;
}

p {

  // Local variable scope
  $clr_dark: #000;
  background-color: $clr_dark;
}

style.css：生成的 CSS 输出将是：

div {

  // Here, clr_light variable assigned
  background-color: #f9f9f9;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}

示例：此示例通过将 SASS 变量编译为 CSS 变量来说明如何使用它。

HTML

  

    
  
    

  

    
Welcome to GeeksforGeeks
  
    
A Computer Science portal for geeks.

  

输出：

Sass 变量和 CSS 变量的区别：

S.No.	SASS Variable	CSS Variable
1.	All the variables are compiled in Sass.	The variables is included in the CSS output & need not compile them.
2.	The Sass variables contain only one value at a time.	The CSS variables can contain different values for different elements.
3.	The Sass variables are imperative ie., if the values of the variables are changed that we have used then its previous used values will remain the same.	The CSS variables are declarative ie., if we change the value of the variable then it will affect the both the values which is previous used values & later used values.

参考： https://sass-lang.com/documentation