JS

青灯古酒

发布于 2023-10-16 08:35:36

1200

发布于 2023-10-16 08:35:36

文章被收录于专栏：青灯古酒

Sass

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

变量

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

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

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

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

嵌套

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

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

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

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

嵌套中的 &

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

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

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

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

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

群组嵌套

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

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-23，如有侵权请联系 cloudcommunity@tencent.com 删除

width