关于html5:如何将Sass编译成CSS

本节咱们来学习 Sass 的编译，咱们写好的 Sass 代码，浏览器是不能辨认的，Sass 只不过是作为一个预处理工具，只有将 Sass 代码编译成 CSS 代码后，才可能应用。那么 Sass 要如何编译成 CSS 代码呢，这就是咱们本节须要讲到的内容。

Sass 的编译办法有很多，例如：

• 命令行编译模式：比较简单，能够间接在终端中输出 Sass 指令来编译，本节咱们次要讲命令行编译模式的应用。
• GUI 工具编译：有的比拟多的看一工具有 Koala、CodeKit、Scout、Compass.app 等，这些工具都须要装置。
• 自动化编译：能够应用 Grunt 或者 Gulp 来配置 Sass 自动化编译。

命令编译

命令编译就是在终端中输出 sass 命令来编译 Sass 代码，这种编译形式应用起来很简略。

示例：

假如当初有一个 Sass 文件，文件名为 style.scss（Sass 文件的扩展名名 .scss），咱们须要将这个文件中的代码编译成 CSS 代码，能够执行如下命令：

sass style.scss style.css

命令执行胜利后，会主动创立一个 style.css 文件。然而这样有一个问题，就是每次更改了 style.scss 文件中的内容，都须要执行一次编译命令，就会很麻烦。

如果要解决上述问题，能够应用监听命令 --watch，例如：

sass --watch style.scss:style.css

成果如下图所示：
[图片上传失败 …(image-c1ec04-1610949292960)]

这样一旦咱们批改了 style.scss 文件，只有从新保留，就会将批改内容主动编译到 style.css 文件中。

如果我的项目中有很多的 sass 文件，能够监听整个目录：

sass --watch app/sass:public/stylesheets

Sass 四种输入格局

在编译 Sass 代码时，咱们能够指定 Sass 的编译输入格局，这须要用到 --style 指令，这个指定前面可接如下四种 Sass 输入格局：

• nested：嵌套输入格局，默认格局。
• expanded：开展输入形式。
• compact：紧凑输入形式。
• compressed：压缩输入形式。

示例：

例如以 style.scss 文件为例，内容如下所示：

.xkd{
    font-size: 14px;
    color: #ccc;
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        border-radius: 5px;
    }
}

• 第一种：应用 nested 编译排版格局输入，能够执行如下命令：

sass style.scss:style.css --style nested

编译后的 CSS 代码：

.xkd {
  font-size: 14px;
  color: #ccc; }
  .xkd .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 5px; }

• 第二种：应用 expanded 编译排版格局输入，能够执行如下命令：

sass style.scss:style.css --style expanded

编译后的 CSS 代码：

.xkd {
  font-size: 14px;
  color: #ccc;
}
.xkd .box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 5px;
}

• 第三种：应用 compact 编译排版格局输入，能够执行如下命令：

sass style.scss:style.css --style compact

编译后的 CSS 代码：

.xkd {font-size: 14px; color: #ccc;}
.xkd .box {width: 100px; height: 100px; border: 1px solid #000; border-radius: 5px;}

• 第四种：应用 compressed 编译排版格局输入，能够执行如下命令：

sass style.scss:style.css --style compressed

编译后的 CSS 代码：

.xkd{font-size:14px;color:#ccc}.xkd .box{width:100px;height:100px;border:1px solid #000;border-radius:5px}

这四种输入格局中，个别我会抉择应用第二种输入格局，也就是 expanded 格局。这种格局和咱们手写的 CSS 款式差不多，选择器、属性等各占用一行，属性依据选择器缩进，而选择器不做任何缩进。