原文： http://zetcode.com/javascript/nodesass/

Node Sass 教程展示了如何使用node-sass模块。 node-sass模块用于将 Sass 代码转换为 CSS 代码。

Sass

Sass 是一种预处理器脚本语言，可解释或编译为级联样式表（CSS）。 Sass 包含两种语法。 较早的语法使用缩进来分隔代码块，并使用换行符来分隔规则。 较新的语法 SCSS 使用类似于 CSS 的块格式。 它使用花括号来表示代码块，并使用分号来分隔块内的行。

传统上，缩进语法和 SCSS 文件分别具有扩展名.sass和.scss。

Node-sass

Node-sass 是一个库，提供了 Node.js 与 LibSass（流行的样式表预处理器 Sass 的 C 版本）的绑定。 它允许我们将 SCSS 文件本地编译为 CSS。

Node Sass 示例

在下面的示例中，我们创建一个使用node-sass模块的简单 Web 项目。

  1. $ mkdir sass
  2. $ mkdir public/css

在项目目录中，我们创建三个子目录。 在sass目录中，我们将有 SCSS 代码。 SCSS 代码将转换为 CSS，然后移至public/css目录。

  1. $ nodejs -v
  2. v9.11.2

我们使用 Node 版本 9.11.2。

  1. $ npm init

我们启动一个新的 Node 应用。

  1. $ npm i node-sass

我们安装node-sass模块。 我们使用该模块来监视 SCSS 文件并将其自动转换为 CSS 代码。

  1. $ npm install -g live-server

另外，我们安装live-server，这是一个具有实时重载功能的小型开发服务器。

package.json

  1. {
  2.   "name": "js-nodesass",
  3.   "version": "1.0.0",
  4.   "description": "node-sass example",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "sass": "node-sass -w sass -o public/css"
  8.   },
  9.   "author": "Jan Bodnar",
  10.   "license": "BSD",
  11.   "dependencies": {
  12.     "node-sass": "^4.9.0"
  13.   }
  14. }

在package.json文件中，我们创建一个运行node-sass模块的脚本。 它将监视sass目录，并将编译后的代码输出到public/css目录。

public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="css/main.css">
  7.     <title>Home page</title>
  8. </head>
  9. <body>
  11. <div class="container">
  13.     <h1>Bugs</h1>
  15.     <table>
  17.         <tr>
  18.             <th>Bug name</th>
  19.             <th>Description</th>
  20.         </tr>
  22.         <tr>
  23.             <td>Assasin bug</td>
  24.             <td>The assassin bug uses its short three-segmented beak to pierce 
  25.                 its prey and eat it.</td>
  26.         </tr>
  28.         <tr>
  29.             <td>Bed bug</td>
  30.             <td>Bed bugs are parasitic insects in the that feed exclusively 
  31.                 on blood.</td>
  32.         </tr>
  34.         <tr>
  35.             <td>Carpet beetle</td>
  36.             <td>Considered a pest of domestic houses and, particularly, natural 
  37.                 history museums where the larvae may damage natural fibers and 
  38.                 can damage carpets, furniture, clothing, and insect collections.</td>
  39.         </tr>
  41.         <tr>
  42.             <td>Earwig</td>
  43.             <td>Earwigs are mostly nocturnal and often hide in small, moist 
  44.                 crevices during the day, and are active at night, feeding on 
  45.                 a wide variety of insects and plants.</td>
  46.         </tr>
  48.     </table>
  50. </div>    
  52. </body>
  53. </html>

这是一个包含一些数据的 HTML 文件。 本文档使用 CSS 文件设置样式。

  1. <link rel="stylesheet" href="css/main.css">

CSS 代码是从css/main目录加载的。

sass/main.scss

  1. $myfont: Georgia 1.1em;
  2. $table_head_col: #ccc;
  3. $table_row_col: #eee;
  4. $table_bor_col: #eee;
  5. $container_width: 700px;
  6. $first_col_width: 150px;
  8. div.container {
  10.     margin: auto; 
  11.     font: $myfont;
  12.     width: $container_width;
  13. }
  15. table {
  17.     tr:nth-child(odd) {background: $table_row_col}
  19.     td:first-child {width: $first_col_width}
  21.     th {
  22.         background-color: $table_head_col;
  23.     }
  25.     border: 1px solid $table_bor_col;
  26. }

这是我们的 SCSS 代码。 我们设置容器和表格的样式。 该代码使用两个重要的 SCSS 功能：变量和嵌套。

  1. $ npm run sass

我们运行sass脚本。

  1. $ live-server --open=public

最后，我们启动开发服务器。

Node Sass 教程 - 图1

图：示例应用

在本教程中，我们使用了node-sass模块。 我们在一个简单的 Web 应用中使用了该模块，将其 SCSS 代码编译为 CSS 代码。

您可能也对以下相关教程感兴趣： Liquid.js 教程， JSON 服务器教程， Gulp Sass 教程， jQuery 自动完成教程或使用 jQuery DatePicker 。