什么是 Sass 输出格式

发布时间：2023-05-26 13:42:31 所属栏目：教程来源：

导读：不同的编码语言都有不同的格式，比如缩进、换行、空格等等，Sass 输出格式指的就是转换为 CSS 代码的格式。

四种输出格式

嵌套格式（:nested）
嵌套格式是 Sass 中的默认输出格式，这种格式选择器和属性都会独

不同的编码语言都有不同的格式，比如缩进、换行、空格等等，Sass 输出格式指的就是转换为 CSS 代码的格式。

四种输出格式

嵌套格式（:nested）
嵌套格式是 Sass 中的默认输出格式，这种格式选择器和属性都会独占一行，能更好的反应出 HTML 元素和样式的关系，同时缩进也会与 Sass 中的缩进保持一致，一般来说这种格式使得我们的样式结构更清晰、更易读。我们举例看下这种格式：

.Box {
   width: px; }
.Box2 {
   width: px;
   height: px; }
   .Box2 p {
       color: red; }

展开格式（:expanded）
展开格式就像我们平时手写 CSS 的格式一样，属性、选择器都会独占一行，属性会缩进，选择器不会缩进而是顶头的，前面章节中我们演示的例子转为的 CSS 代码就都是展开格式的，我们举个例子看下这种格式：

.Box {
width: px;
}
.Box2 {
width: px;
height: px;
}
.Box2 p {
color: red;
}
.Box2 .main {
width: ;
heigth: auto;
}
从上面的代码就可以看出来，这种格式的缩进、换行等其实和我们平时项目中写的 CSS 的格式是一样的。

紧凑格式（:compact）
看名字就知道，这种格式占用的空间肯定是小的，每个选择器和其 CSS 样式只占用一行，而且嵌套的选择器之间没用空行，只有不嵌套的选择器之间才会有空行，空行的意思其实就是分隔符，我们举例看下这种格式：

.Box { width: px; }
.Box2 { width: px; height: px; }
.Box2 p { color: red; }
.Box2 .main { width: ;heigth: auto; }
从上面可以看出这种格式转换的 CSS 的代码更为紧凑，占据的空间更小，不过当内容多了后读起来可能不是很方便。

压缩格式（:compressed）
通过字面意思看，这种格式是将生成的 CSS 代码直接压缩，删除所有无意义的空行、换行、空格以及注释，从而将生成的代码体积尽量压缩至最小，在压缩的同时会对生成的代码进行一些调整将体积压缩至更小，我们举个例子看下压缩后的 CSS 代码：

.Box{width:px;}.Box2{width:px;height:px;}.Box2 p{color:red;}.Box2 .main{width:;heigth:auto;}
上面这种压缩后的代码我们基本是没法看和更改的，所以这种格式一般用于生产环境，也就是上线的时候会调整为这种格式来输出。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!