菜单
×
   ❮   
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 简介


您应该已经了解的内容

在继续之前,您应该对以下内容有一个基本的了解:

  • HTML
  • CSS

如果您想先学习这些主题,请在我们首页上查找教程。


什么是 Sass?

  • Sass 代表 Syntactically Awesome Stylesheet(语法优美的样式表)
  • Sass 是 CSS 的扩展
  • Sass 是一个 CSS 预处理器
  • Sass 完全兼容所有版本的 CSS
  • Sass 减少了 CSS 的重复,从而节省了时间
  • Sass 于 2006 年由 Hampton Catlin 设计,Natalie Weizenbaum 开发
  • Sass 可免费下载和使用

为什么要使用 Sass?

样式表变得越来越大、越来越复杂,也越来越难以维护。这时,CSS 预处理器就可以派上用场了。

Sass 允许你使用 CSS 中不存在的功能,例如变量、嵌套规则、混合(mixins)、导入(imports)、继承(inheritance)、内置函数等。


Sass 用途的一个简单示例

假设我们有一个网站,有三种主色调

#a2b9bc

#b2ad7f

#878f99

那么,你需要输入多少次这些 HEX 值?很多次。如果出现相同颜色的变体呢?

与其多次输入上述值,不如使用 Sass 并这样写

Sass 示例

/* 为主色定义变量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* 使用变量 */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

因此,当使用 Sass 时,如果主色调发生变化,你只需要在一个地方更改即可。



Sass 如何工作?

浏览器无法理解 Sass 代码。因此,你需要一个 Sass 预处理器来将 Sass 代码转换为标准的 CSS。

这个过程称为转译(transpiling)。所以,你需要提供一些 Sass 代码给转译器(某种程序),然后得到一些 CSS 代码。

提示: 转译(Transpiling)是指将一种语言的源代码转换/翻译成另一种语言。


Sass 文件类型

Sass 文件具有 ".scss" 文件扩展名。


Sass 注释

Sass 支持标准的 CSS 注释 /* 注释 */,此外它还支持单行注释 // 注释

Sass 示例

/* 定义主色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* 使用变量 */
.main-header {
  background-color: $primary_1; // 这里可以放一个单行注释
}


×

联系销售

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

报告错误

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

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

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