【sass变量 $简介以及使用方法】

在Sass（Syntactically Awesome Stylesheets）中，变量是一个非常重要的功能，它允许你存储并复用值，使得样式表更易于维护和扩展。Sass变量以美元符号（$）开头，后面跟变量名，再然后是冒号和变量的值。

Sass变量的基本使用

1. 声明变量：
   在Sass中，你可以使用$符号来声明变量。

   // 声明一个Sass变量
   $primary-color: #007bff;
   

2. 使用变量：
   在样式规则中，你可以直接使用这些变量，Sass预处理器在编译时会将变量替换为其对应的值。

   // 使用Sass变量
   body {
     color: $primary-color;
   }
   
   // 编译后的CSS
   body {
     color: #007bff;
   }
   

3. 变量命名：
   变量名可以使用字母、数字、下划线和连字符，但必须以字母或下划线开头。尽量避免使用Sass或CSS的保留字作为变量名。

4. 作用域和全局变量：
   Sass变量有作用域的概念。如果你在一个规则集内部声明一个变量，那么这个变量就只会在这个规则集内部有效。但如果你在一个规则集外部或全局范围内声明一个变量，那么它就是全局变量，可以在任何地方被访问。

   // 全局变量
   $global-color: #f00;
   
   // 规则集内部的局部变量
   .container {
     $local-color: #0f0;
     color: $local-color; // 使用局部变量
     &:hover {
       color: $global-color; // 使用全局变量
     }
   }
   

5. 默认变量值：
   Sass允许你为变量设置默认值，这样如果变量在调用时没有被赋值，就会使用默认值。

   // 设置默认变量值
   $font-stack: Helvetica, sans-serif !default;
   $primary-color: blue !default;
   
   // 如果在调用前没有重新赋值，就会使用默认值
   body {
     font: 100% $font-stack;
     color: $primary-color;
   }
   

6. 变量插值：
   Sass中的变量插值允许你将变量值嵌入到选择器名、属性名或URL等中。使用#{}将变量包裹起来以实现插值。

   $sidebar-width: 200px;
   
   // 变量插值到选择器中
   .sidebar-#{$sidebar-width} {
     width: $sidebar-width;
   }
   
   // 编译后的CSS
   .sidebar-200px {
     width: 200px;
   }
   

总结

Sass变量是Sass中非常重要的一个功能，它允许你创建可维护、可重用的样式代码。通过合理地使用Sass变量，你可以更好地组织你的样式表，减少重复的代码，并使得样式的修改更加简单和高效。