Sass 连接词(&)基础介绍 DAY32

在介绍今天的内容之前
推荐一个不错的东西
那就是 CodePen啦
https://codepen.io/your-work
可以先上撰写程序码
连 Sass也支援 非常方便

这里点选小齿轮
会跳出

就可以选择自己想要的格式啦

那麽就开始介绍到底怎麽写Scss啦
css

.menu li {
  font-size: 20px;
}
.menu li a {
  color: #EA0000;
}

Scss

.menu{
  //若有第2层 直接在大刮号里面写
  li{
    font-size: 20px;
    //若有第3层 直接在大刮号里面写
    a{
      color: #EA0000;
    }
  }
}

CodePen:https://codepen.io/wemyferb/pen/LYZYMZB
可以点击

再点击

就可以看到编译後的Scss(也就是css)

Sass 写法
https://codepen.io/wemyferb/pen/gOMOZjp

它并没有大括号
而是利用 两个空白 或 一个tab 来区隔
且样式不能加分号
注意
color: red
冒号後面也必须加个空白

Sass 编译方式

1. 软件编译(prepos)
   https://prepros.io/
   要记得是指定根目录(并非指定Sass/Scss档)
   且你的Sass/Scss档必须放在scss资料夹内
2. gulp/webpack 前端任务/打包工具
3. 网页编辑器内件插件(Live Sass Compiler)
   这里提供一篇文章
   介绍如何把scss档输出到指位置
   https://medium.com/@enshenghuang/%E4%BD%BF%E7%94%A8vscode%E5%A4%96%E6%8E%9B%E8%87%AA%E5%8B%95%E7%B7%A8%E8%AD%AFsass-scss-9ff768d23b48

& 连结词

编译前

.header{
  height: 500px;
  .logo{
    background-color: #37523d;
    a{
      color: #000;
      &:hover{
        color: pink;
      }
    }
  }
}

编译後

.header {
  height: 500px;
}
.header .logo {
  background-color: #37523d;
}
.header .logo a {
  color: #000;
}
.header .logo a:hover {
  color: pink;
}

& 代表上一层结构是谁
CodePen: https://codepen.io/wemyferb/pen/qBNBgEG
那今天 Sass 介绍就到这里啦
明天将介绍 Sass 变数
敬请期待罗~~