修改编译输出的 CSS 格式

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Sass 编译输出的 CSS 有四种格式,nested,嵌套,compact,紧凑,expanded,扩展,compressed,压缩。这种样式会影响输出的 CSS 的格式。

默认 Sass 编译输出的 CSS 使用的是嵌套的格式,你会发现,这个 style.css 里面,这块样式的最后结尾的这个花括号没有在新的一行。为了更清楚什么是嵌套的格式,我们可以再试一下使用 Sass 的嵌套语法写的样式。先删除掉这个 style.scss 里面的东西。然后用一个 ul 标签作为样式的选择器。 给它添加一个字体的属性 ...

然后直接在这个 ul 样式块里面,再添加一个 li 标签,作为新的样式的选择器。在它里面,再添加一条样式的属性。这种写法就是 Sass 的嵌套,我们会在后面的视频里详细的再介绍一下。先看一下这样写的 Sass 输出的 CSS 是什么样的。保存一下 ...

这里 ul 这个选择器是一块样式,它下面还有一个 ul 空格 li ,这块样式会右向缩进一块,因为我们在写 Sass 的时候使用的是嵌套。所以输出的 CSS 的格式也会保存这个嵌套的格式。这就是默认 Sass 的输出的 CSS 的格式。

下面我们再去试一下其它的几种格式... 回到命令行工具 ... 先停止一下 Sass 的监视 .. 按一下 ctrl + C ... 然后再调出前面执行的这条 Sass 的命令, 在它的后面,我们可以加上一个 --style 选项 ... 再输入一个空格 ... 接着是编译输出的 CSS 格式 .. 我们先试一下 compact ..

sass --watch sass:css --style compact

回车 ... 回到编辑器 ... 现在,这个输出的 CSS 的格式就是紧凑的,这种格式的 CSS,每块样式都会单独在同一行里面。 再去试一下其它的格式 ...

ctrl + C ... 再调出前面执行的命令 .... 这次我们把 compact 换成 compressed ... 压缩的格式 .. 回车 .. 再回到编辑器 .. 这次你会发现,输出的 CSS 都会在同一行里面,这种格式的 CSS 体积更小一些 ...

最后再去试一下 expanded ... 回到命令行 ... 先停止一下 ... ctrl + C ... 然后把 compressed ,换成 expanded ... 回车执行一下 ...

再回到编辑器 .. 现在你看到的就是扩展格式的 CSS,这样格式的 CSS 更容易阅读一些,也是我们平时手工撰写 CSS 的时候最常用到的格式 ...

修改编译输出的 CSS 格式《 Sass 基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点