chevron_left

Sass / Scss 实践教程
免费
第 3 回

教程文档

Sass / Scss 实践教程 - 变量

2023年11月13日更新
Sass / Scss 实践教程

变量

使用

在Sass/Scss中，由$符号开头的就是变量。

// 全局变量
$nav-color: #08c;

nav {
  // 局部变量
  $width: 100px;
  width: $width;
  color: $nav-color;
}

nav h1 {
  // 错误，你不能使用其他{}里面的局部变量
  // width: $width;
}

编译后

nav {
  width: 100px;
  color: #08c;
}
  1. -与_命名都是合法的，而且是通用的，也就说$nav-color与$nav_color是同一个变量
  2. 一般来说，推荐统一使用-
请登录后查看更多expand_more

课程介绍

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS 是对 CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出 Stylesheet。Sass 最后还是会编译出合法的 CSS 让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和 CSS 的语法非常的像，几乎一样），因为它不是标准的 CSS 格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

Sass 包括两套语法。最开始的语法叫做“缩进语法”，与 Haml 类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass 和.scss 两个文件扩展名区分开。

目录

适合这样的人

新手

授课老师