JS

Sass

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

变量

• 定义一个变量，在后面的代码中使用
• 使用 $ 来定义变量

代码语言：javascript复制

// 定义一个 $c 作为变量，值是 红色
 $c: red;
 
 h1 {
     // 在使用 $c 这个变量
     color: $c;
 }

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

代码语言：javascript复制

h1 {
     // 这个 $w 变量只能在 h1 这个规则块中使用
     $w: 100px;
     width: $w;
 }

嵌套

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

代码语言：javascript复制

h1 {
     width: 100px;
 
     div {
         width: 200px;
     }
 }
 
 // 编译结果
 h1 {
     width: 100px;
 }
 
 h1 div {
     width: 200px;
 }

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

代码语言：javascript复制

ul {
     width: 100px;
 
     li {
         width: 90px;
 
         div {
             width: 80px;
 
             p {
                 width: 70px;
 
                 span: {
                     color: red;
                 }
             }
         }
     }
 }

嵌套中的 &

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

代码语言：javascript复制

div {
     width: 100px;
     height: 100px;
 
     :hover {
         width: 200px;
     }
 }
 
 // 我想的是 div 被鼠标悬停的时候 width 变成 200
 // 但是编译结果却是
 div {
     width: 100px;
     height: 100px;
 }
 div :hover {
     width: 200px;
 }

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

代码语言：javascript复制

div {
     width: 100px;
     height: 100px;
 
     &:hover {
         width: 200px;
     }
 }
 
 // 编译结果
 div {
     width: 100px;
     height: 100px;
 }
 div:hover {
     width: 200px;
 }

• 这个时候就和我需要的一样了

群组嵌套

• 群组嵌套就是多个标签同时嵌套

代码语言：javascript复制

div {
     width: 100px;
 
     .box1, .box2, .box3 {
         color: red;
     }
 }
 
 // 编译结果
 div {
     width: 100px;
 }
 div .box1, div .box2, div .box3 {
     color: red;
 }

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

代码语言：javascript复制

h1, h2, h3 {
     width: 100px;
 
     .box {
         color: red;
     }
 }
 
 // 编译结果
 h1, h2, h3 {
     width: 100px;
 }
 h1 .box, h2 .box, h3 .box {
     color: red;
 }

width 变量 编译 工具 浏览器

0 人点赞