菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Sass 变量


Sass 变量

变量是存储信息的一种方式,以后可以重用。

使用 Sass,您可以将信息存储在变量中,例如

  • strings
  • 数字
  • 颜色
  • 布尔值
  • 列表
  • 空值

Sass 使用 $ 符号,后跟一个名称,来声明变量

Sass 变量语法

$variableName: value;

下面的示例声明了四个名为 myFont、myColor、myFontSize 和 myWidth 的变量。声明变量后,您可以在任何地方使用这些变量

SCSS Syntax(SCSS 语法)

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

运行示例 »

因此,当 Sass 文件被转译时,它会获取变量(myFont、myColor 等),并输出常规 CSS,将变量值放在 CSS 中,如下所示

CSS Output(CSS 输出)

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}



Sass 变量作用域

Sass 变量仅在定义它们的嵌套级别可用。

看下面的例子

SCSS Syntax(SCSS 语法)

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

运行示例 »

<p> 标签内的文本颜色是红色还是绿色?它是红色的!

另一个定义,$myColor: green; 位于 <h1> 规则内,并且仅在那里可用!

因此,CSS 输出将是

CSS Output(CSS 输出)

h1 {
  color: green;
}

p {
  color: red;
}

好的,这就是变量作用域的默认行为。


使用 Sass !global

可以通过使用 !global 开关来覆盖变量作用域的默认行为。

!global 表示一个变量是全局的,这意味着它可以被所有级别访问。

查看以下示例(与上面相同;但添加了 !global

SCSS Syntax(SCSS 语法)

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

运行示例 »

现在 <p> 标签内的文本颜色将是绿色的!

因此,CSS 输出将是

CSS Output(CSS 输出)

h1 {
  color: green;
}

p {
  color: green;
}

提示:全局变量应在任何规则之外定义。最好将所有全局变量定义在自己的文件中,命名为 "_globals.scss",然后使用 @include 关键字包含该文件。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持