如何将Sass编译成CSS

Posted 书和咖啡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将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 样式差不多,选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进。

链接:https://www.9xkd.com/

以上是关于如何将Sass编译成CSS的主要内容,如果未能解决你的问题,请参考以下文章

Sass 不会将 mixins 和变量编译成 css

如何将scss转换成css文件

如何安装并编译sass为css文件

为啥我的sass 不会自动编译成css

如何使用 grunt-sass 编译多个 scss 文件

Gulp-sass 不会编译成 CSS