sass编译_通过五个快速步骤监视和编译Sass

最新推荐文章于 2024-03-20 09:38:12 发布

翻译最新推荐文章于 2024-03-20 09:38:12 发布 · 582 阅读

文章标签：

#linux #python #java #vue #npm #ViewUI

sass编译

Sass可能是CSS预处理器中最受欢迎的一种。多年来，它帮助我们编写了干净，可重用和模块化CSS。在本快速教程中，我将直接介绍重要的内容，并说明如何使用命令行将Sass编译为CSS。

1.安装Node.js

要通过命令行编译Sass，首先我们需要安装node.js。从官方网站nodejs.org下载它，打开软件包并按照向导进行操作。

2.初始化NPM

NPM是JavaScript的Node Package Manager。 NPM使安装和卸载第三方软件包变得容易。要使用NPM初始化Sass项目，请打开终端和CD（更改目录）到项目文件夹。

进入正确的文件夹后，运行命令npm init 。系统将提示您回答有关该项目的几个问题，然后NPM将在您的文件夹中生成package.json文件。

3.安装Node-Sass

Node-sass是一个NPM软件包，可将Sass编译为CSS（它也非常快地完成）。要安装node-sass，请在终端中运行以下命令： npm install node-sass

4.编写Node-sass命令

一切准备就绪，可以编写一个小的脚本来编译Sass。在代码编辑器中打开package.json文件。您将看到如下内容：

{
  "name": "sass-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

脚本中的部分添加SCSS命令，测试命令下，因为它的显示如下：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

让我们逐字逐句地进行浏览。

node-sass ：指代node-sass软件包。
--watch ：一个可选的标志，它的意思是“看在SCSS /文件夹中的所有文件.scss并重新编译他们每有一个变化的时间。”
scss ：我们放置所有scss文件的文件夹名称。
-o css ：已编译CSS的输出文件夹。

当我们运行这个脚本会观看每.scss在文件scss/文件夹，然后保存在编译CSS css/文件夹，每次我们改变.scss文件。

5.运行脚本

要执行单行脚本，我们需要在终端中运行以下命令： npm run scss

瞧！我们正在监视和编译SASS。

Sass快速提示

请继续关注更多Sass快速提示；途中有一个完整的收藏！

翻译自: https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

sass编译