Node Sass 教程 · ZetCode 中文系列教程

# Node Sass 教程 > 原文： [http://zetcode.com/javascript/nodesass/](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 項目。 ```js $ mkdir sass $ mkdir public/css ``` 在項目目錄中，我們創建三個子目錄。在`sass`目錄中，我們將有 SCSS 代碼。 SCSS 代碼將轉換為 CSS，然后移至`public/css`目錄。 ```js $ nodejs -v v9.11.2 ``` 我們使用 Node 版本 9.11.2。 ```js $ npm init ``` 我們啟動一個新的 Node 應用。 ```js $ npm i node-sass ``` 我們安裝`node-sass`模塊。我們使用該模塊來監視 SCSS 文件并將其自動轉換為 CSS 代碼。 ```js $ npm install -g live-server ``` 另外，我們安裝`live-server`，這是一個具有實時重載功能的小型開發服務器。 `package.json` ```js { "name": "js-nodesass", "version": "1.0.0", "description": "node-sass example", "main": "index.js", "scripts": { "sass": "node-sass -w sass -o public/css" }, "author": "Jan Bodnar", "license": "BSD", "dependencies": { "node-sass": "^4.9.0" } } ``` 在`package.json`文件中，我們創建一個運行`node-sass`模塊的腳本。它將監視`sass`目錄，并將編譯后的代碼輸出到`public/css`目錄。 `public/index.html` ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <title>Home page</title> </head> <body> <div class="container"> <h1>Bugs</h1> <table> <tr> <th>Bug name</th> <th>Description</th> </tr> <tr> <td>Assasin bug</td> <td>The assassin bug uses its short three-segmented beak to pierce its prey and eat it.</td> </tr> <tr> <td>Bed bug</td> <td>Bed bugs are parasitic insects in the that feed exclusively on blood.</td> </tr> <tr> <td>Carpet beetle</td> <td>Considered a pest of domestic houses and, particularly, natural history museums where the larvae may damage natural fibers and can damage carpets, furniture, clothing, and insect collections.</td> </tr> <tr> <td>Earwig</td> <td>Earwigs are mostly nocturnal and often hide in small, moist crevices during the day, and are active at night, feeding on a wide variety of insects and plants.</td> </tr> </table> </div> </body> </html> ``` 這是一個包含一些數據的 HTML 文件。本文檔使用 CSS 文件設置樣式。 ```js <link rel="stylesheet" href="css/main.css"> ``` CSS 代碼是從`css/main`目錄加載的。 `sass/main.scss` ```js $myfont: Georgia 1.1em; $table_head_col: #ccc; $table_row_col: #eee; $table_bor_col: #eee; $container_width: 700px; $first_col_width: 150px; div.container { margin: auto; font: $myfont; width: $container_width; } table { tr:nth-child(odd) {background: $table_row_col} td:first-child {width: $first_col_width} th { background-color: $table_head_col; } border: 1px solid $table_bor_col; } ``` 這是我們的 SCSS 代碼。我們設置容器和表格的樣式。該代碼使用兩個重要的 SCSS 功能：變量和嵌套。 ```js $ npm run sass ``` 我們運行`sass`腳本。 ```js $ live-server --open=public ``` 最后，我們啟動開發服務器。 ![Sample application](https://img.kancloud.cn/2e/14/2e143f8a91e3f0bce7c9d9ec2b4cb6c7_625x458.jpg) 圖：示例應用在本教程中，我們使用了`node-sass`模塊。我們在一個簡單的 Web 應用中使用了該模塊，將其 SCSS 代碼編譯為 CSS 代碼。您可能也對以下相關教程感興趣： [Liquid.js 教程](/javascript/liquidjs/)， [JSON 服務器教程](/javascript/jsonserver/)， [Gulp Sass 教程](/gulp/sass/)， [jQuery 自動完成教程](/articles/jqueryautocomplete/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 。