Node Sass 教程展示了如何使用 node-sass 模块。 node-sass 模块用于将 Sass 代码转换为 CSS 代码。
萨斯
Sass 是一种预处理器脚本语言,可以解释或编译成层叠样式表 (CSS)。 Sass 包含两种语法。较旧的语法使用缩进来分隔代码块和换行符来分隔规则。较新的语法 SCSS 使用像 CSS 一样的块格式。它使用大括号表示代码块,使用分号来分隔块中的行。
传统上,缩进语法和 SCSS 文件的扩展名分别为.sass
和.scss
。
节点-sass
Node-sass 是一个库,它提供 Node.js 到 LibSass 的绑定,LibSass 是流行的样式表预处理器 Sass 的 C 版本。它允许我们将 SCSS 文件本地编译为 CSS。
节点 Sass 示例
在下面的示例中,我们创建了一个使用node-sass
模块的简单 Web 项目。
$ mkdir sass $ mkdir -p public/css
在项目目录中,我们创建三个子目录。在sass
目录中,我们将有 SCSS 代码。 SCSS代码被翻译成CSS并移动到public/css
目录。
$ npm init -y
我们启动一个新的 Node 应用程序。
$ npm i node-sass
我们安装node-sass
模块。我们使用该模块来监视 SCSS 文件并自动将它们翻译成 CSS 代码。
$ npm install -g live-server
此外,我们安装live-server
,这是一个具有实时重载功能的小型开发服务器。
{ "name": "nodesass-ex", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "sass": "node-sass -w sass -o public/css" }, "keywords": [], "author": "Jan Bodnar", "license": "BSD", "dependencies": { "node-sass": "^5.0.0" } }
在package.json
文件中,我们创建了一个运行node-sass
模块的脚本。它会监视sass
目录并将编译后的代码输出到public/css
目录。
<!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 文件设置样式。
<link rel="stylesheet" href="css/main.css">
CSS 代码从css/main
目录加载。
$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 功能:变量和嵌套。
以下命令在单独的终端中运行;他们启动两个正在运行的进程。
$ npm run sass
我们运行 sass
脚本。
$ live-server --open=public
最后,我们启动开发服务器。现在修改sass/main.scss
文件。
在本文中,我们使用了node-sass
模块。我们在一个简单的 Web 应用程序中使用该模块将其 SCSS 代码编译成 CSS 代码。
列出所有 JavaScript 教程。