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 编译方式

软体编译(prepos)
https://prepros.io/
要记得是指定根目录(并非指定Sass/Scss档)
且你的Sass/Scss档必须放在scss资料夹内gulp/webpack 前端任务/打包工具网页编辑器内件插件(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 变数
敬请期待啰~~