JS

121 阅读1分钟

Sass

  • SASS官网
  • 世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
  • ​sass​​​ 是一个 ​​css​​ 的预编译工具
  • 也就是能够 更优雅 的书写 ​​css​
  • ​sass​​ 写出来的东西 浏览器不认识
  • 依旧是要转换成 ​​css​​ 在浏览器中运行
变量
  • 定义一个变量,在后面的代码中使用
  • 使用 ​​$​​ 来定义变量

1

// 定义一个 $c 作为变量,值是 红色

2

 $c: red;

3

4

 h1 {

5

     // 在使用 $c 这个变量

6

     color: $c;

7

 }

  • 上面定义的变量全局都可以使用
  • 我们也可以在规则块内定义私有变量

嵌套
  • ​sass​​ 里面我们最长用到的就是嵌套了
  • 而且相当的好用

  • 这个就是嵌套,理论上可以无限嵌套下去

嵌套中的 &
  • 在嵌套中还有一个标识符是 ​​&​​ 我们可以使用
  • 先来看一个例子

  • 和预想的结果不一样了
  • 这个时候就要用到 ​​&​​ 来连接了

  • 这个时候就和我需要的一样了
群组嵌套
  • 群组嵌套就是多个标签同时嵌套

  • 还有一种就是多个标签同时嵌套一个标签