首页>编程相关>其他源码
下载

节点 sass

警告： Node Sass 已达到生命周期终点。即使是安全修复，它也不会再收到任何版本。仍在使用它的项目应该转移到 Dart Sass。

节点版本支持政策

  1. 支持的 Node.js 版本因版本而异，请参阅版本页面。

  2. 生命周期结束的 Node 版本 https://github.com/nodejs/Release 将在每个 node-sass 版本（主要、次要）中不再支持。

  3. 我们将停止为不受支持的版本构建二进制文件，测试依赖项兼容性的破坏，但我们不会阻止那些想要支持自己的人的安装。

  4. 新节点的发布需要较小的内部更改以及 CI 提供商（AppVeyor、GitHub Actions）的支持。我们将开设一期供感兴趣的各方订阅，并关闭其他期。

以下是 Node-sass 支持的最低和最高版本的快速指南：

NodeJS支持的node-sass版本节点模块
节点20 9.0+ 115
节点19 8.0+ 111
节点18 8.0+ 108
节点17 7.0+，<8.0 102
节点16 6.0+ 93
节点15 5.0+，<7.0 88
节点14 4.14+，<9.0 83
节点13 4.13+，<5.0 79
节点12 4.12+，<8.0 72
节点11 4.10+，<5.0 67
节点10 4.9+，<6.0 64
节点8 4.5.3+，<5.0 57
节点<8 <5.0 <57


Node-sass 是一个库，提供 Node.js 到 LibSass 的绑定，LibSass 是流行样式表预处理器 Sass 的 C 版本。

它允许您以令人难以置信的速度将 .scss 文件本地编译为 css，并通过连接中间件自动编译。

在 npm 上找到它：https://www.npmjs.com/package/node-sass

在 Twitter 上关注 @nodesass 以获取发布更新：https://twitter.com/nodesass

安装

npm 安装node-sass

一些用户报告由于node被注册到另一个软件包而在 Ubuntu 上安装时出现问题。按照 NodeJS 官方文档安装 NodeJS，以便#!/usr/bin/env node正确解析。

在 Windows 机器上编译需要 node-gyp 先决条件。

您是否看到以下错误？查看我们的故障排除指南。** 

SyntaxError: Use of const in strict mode.

安装遇到问题？查看我们的故障排除指南。

在中国从镜像安装

npm install -g mirror-config-china --registry=https://registry.npmmirror.com
npm 安装node-sass

用法

var sass = require('node-sass');sass.render({
  文件：scss_文件名，
  [, options..]}, function(err, result) { /*...*/ });// ORvar result = sass.renderSync({
  数据：scss_内容
  [， 选项..]}）;

选项

文件

  • 类型： String

  • 默认值： null

特殊：必须指定file或data

供 LibSass 编译的文件的路径。

数据

  • 类型： String

  • 默认值： null

特殊：必须指定file或data

要传递给 LibSass 进行编译的字符串。建议您将includePaths与此结合使用，以便 LibSass 在使用@import指令时可以找到文件。

导入程序 (>= v2.0.0) -实验性

这是一个实验性 LibSass 功能。谨慎使用。

  • 类型： Function | Function[]签名function(url, prev, done)

  • 默认值： undefined

功能参数及信息：

  • url (String) - LibSass 遇到的 import as-is路径

  • prev (String) - 先前解析的路径

  • done (Function) - 在异步完成时调用的回调函数，采用包含以下内容的对象文字

    • file (String) - LibSass 使用的备用路径OR

    • contents (String) - 导入的内容（例如，从内存或文件系统读取）

当 LibSass 遇到@import指令时进行处理。自定义导入器允许以同步和异步方式扩展 LibSass 引擎。在这两种情况下，目标都是使用对象文字return或调用done() 。根据对象字面量的值，将会发生以下两种情况之一。

当使用{ file: "String" }返回或调用done()时，将为@import假定新文件路径。建议在可能需要相对路径解析的情况下注意prev的值。

当使用{ contents: "String" }返回或调用done()时，将使用字符串值，就像通过外部源读入文件一样。

从 v3.0.0 开始：

  • this指的是立即运行sass.render或sass.renderSync的上下文范围

  • 导入器可以返回错误，LibSass 将发出该错误作为响应。例如：

     done(new Error('不存在！'));//或者同步返回return new Error('nothing to do here');

  • importer 可以是一个函数数组，LibSass 将按照它们在数组中出现的顺序调用它们。这有助于用户为特定类型的路径（文件系统、http）指定特殊的导入程序。如果导入器不想处理特定路径，则应返回null 。有关 Sass 类型的更多详细信息，请参阅函数部分。

函数 (>= v3.0.0) -实验性

这是一个实验性 LibSass 功能。谨慎使用。

functions是一个Object ，它包含可以由正在编译的 sass 文件调用的自定义函数的集合。它们可能需要零个或多个输入参数，并且必须同步（ return ...; ）或异步（ done(); ）返回一个值。这些参数将是require('node-sass').types哈希中包含的构造函数之一的实例。返回值也必须是这些类型之一。请参阅下面的可用类型列表：

类型.Number(值 [, 单位 = ""])

  • getValue() / setValue(value) ：获取/设置数字的数字部分

  • getUnit() / setUnit(unit) ：获取/设置数字的单位部分

类型.String(值)

  • getValue() / setValue(value) ：获取/设置包含的字符串

types.Color(r, g, b [, a = 1.0]) 或 types.Color(argb)

  • getR() / setR(value) ：红色分量（ 0到255之间的整数）

  • getG() / setG(value) ：绿色分量（ 0到255之间的整数）

  • getB() / setB(value) ：蓝色分量（ 0到255之间的整数）

  • getA() / setA(value) ：alpha 分量（从0到1.0数字）

例子：

 var Color = require('node-sass').types.Color,
  c1 = 新颜色(255, 0, 0),
  c2 = 新颜色(0xff0088cc);

类型.Boolean(值)

  • getValue() ：获取封闭的布尔值

  • types.Boolean.TRUE ：包含“true”的types.Boolean的单例实例

  • types.Boolean.FALSE ：包含“false”的types.Boolean的单例实例

types.List(长度[, 逗号分隔符 = true])

  • getValue(index) / setValue(index, value) ： value本身必须是sass.types中构造函数之一的实例。

  • getSeparator() / setSeparator(isComma) : 是否使用逗号作为分隔符

  • getLength()

类型.Map(长度)

  • getKey(index) / setKey(index, value)

  • getValue(index) / setValue(index, value)

  • getLength()

类型.Null()

  • types.Null.NULL ： types.Null的单例实例。

例子

sass.renderSync({
  数据：'#{标题(2,5)} { 颜色：#08c; }',
  函数： {'headings($from: 0, $to: 6)': function(from, to) { var i, f = from.getValue(), t = to.getValue(), list = new sass.types .List(t - f + 1);  for (i = f; i <= t; i++) {list.setValue(i - f, new sass.types.String('h' + i));  } 返回列表；}
  }});

包含路径

  • 类型： Array

  • 默认： []

LibSass 可以查找的路径数组，以尝试解析您的@import声明。当使用data时，建议您使用这个。

缩进语法

  • 类型： Boolean

  • 默认值： false

true值启用 Sass 缩进语法来解析数据字符串或文件。

注意：只要文件名中使用 .sass 和 .scss 扩展名，node-sass/libsass 就会使用默认设置 (false) 编译 scss 和缩进语法 (.sass) 文件的混合库。

缩进类型 (>= v3.0.0)

  • 类型： String

  • 默认值： space

用于确定是否使用空格或制表符进行缩进。

缩进宽度 (>= v3.0.0)

  • 类型： Number

  • 默认值： 2

  • 最多： 10

用于确定用于缩进的空格或制表符的数量。

换行 (>= v3.0.0)

  • 类型： String

  • 默认值： lf

用于确定是否使用cr 、 crlf 、 lf或lfcr序列进行换行。

省略SourceMapUrl

  • 类型： Boolean

  • 默认值： false

特别：使用此功能时，还应该指定outFile以避免意外行为。

true值禁止在输出文件中包含源映射信息。

输出文件

  • 类型： String | null

  • 默认值： null

特殊：当sourceMap为真值时需要

指定输出文件的预期位置。强烈建议在输出源映射时使用，以便它们可以正确引用其预期文件。

注意启用此选项不会为您将文件写入磁盘，它仅用于内部参考目的（例如生成地图）。

如何将其写入磁盘的示例

sass.render({...outFile: yourPathTotheFile,
  }, function(error, result) { // 从 v3.0.0 开始节点式回调 if(!error){ // 编译过程中没有错误，将此结果写入磁盘 fs.writeFile(yourPathTotheFile, result.css, function (err){if(!err){ //文件写入磁盘} });}
  });});

输出样式

  • 类型： String

  • 默认： nested

  • 值： nested 、 expanded 、 compact 、 compressed

确定最终 CSS 样式的输出格式。

精确

  • 类型： Integer

  • 默认值： 5

用于确定允许小数点后的位数。例如，如果十进制数为1.23456789且精度为5 ，则最终 CSS 中的结果将为1.23457 。

来源评论

  • 类型： Boolean

  • 默认值： false

true允许将定义选择器的行号和文件作为注释发送到已编译的 CSS 中。对于调试很有用，特别是在使用导入和混合时。

源图

  • 类型： Boolean | String | undefined

  • 默认值： undefined

在render和renderSync期间启用源映射生成。

当sourceMap === true时， outFile的值用作源映射的目标输出位置，并附加后缀.map 。如果未设置outFile ，则忽略sourceMap参数。

当typeof sourceMap === "string"时， sourceMap的值将作为文件的写入位置。

源地图内容

  • 类型： Boolean

  • 默认值： false

true包含源映射信息中的contents

源地图嵌入

  • 类型： Boolean

  • 默认值： false

true将源映射作为数据 URI 嵌入

源MapRoot

  • 类型： String

  • 默认值： undefined

该值将作为源映射信息中的sourceRoot发出

render回调 (>= v3.0.0)

node-sass 支持带有function(err, result)签名的标准节点样式异步回调。在错误情况下， error参数由错误对象填充。在成功条件下， result对象将填充有描述渲染调用结果的对象。

错误对象

  • message （字符串）- 错误消息。

  • line (Number) - 错误的行号。

  • column （数字）- 错误的列号。

  • status （数字）- 状态代码。

  • file (String) - 错误的文件名。如果未设置file选项（有利于data ），这将反映值stdin 。

结果对象

  • css (Buffer) - 编译后的 CSS。将其写入文件，或根据需要提供。

  • map (Buffer) - 源映射

  • stats （对象） - 包含有关编译的信息的对象。它包含以下键：

    • entry （字符串）- scss 文件的路径，如果源不是文件，则为data路径

    • start (Number) - 编译前的 Date.now()

    • end (Number) - 编译后的 Date.now()

    • duration （数字）-结束-开始

    • includedFiles （数组） - 所有相关 scss 文件的绝对路径（无特定顺序）。

示例

var sass = require('node-sass');sass.render({
  文件：'/path/to/myFile.scss'，
  数据：'主体{背景：蓝色; a{颜色:黑色;}}',
  importer: function(url, prev, did) {// url 是导入时原样的路径，LibSass 遇到的。 // prev 是之前解析的路径。 // did 是一个可选的回调，要么消费它，要么同步返回值.// this.options 包含此选项哈希，this.callback 包含节点样式的回调someAsyncFunction(url, prev, function(result){ did({file: result.path, // 仅需要其中一个，请参阅部分特殊 Behaviours.contents: result.data });});// ORvar result = someSyncFunction(url, prev);return {file: result.path,contents: result.data};
  },
  includePaths: [ 'lib/', 'mod/' ],
  outputStyle: 'compressed'}, function(error, result) { // 从 v3.0.0 开始节点式回调
  if (error) {console.log(error.status); // 曾经是 v2x 和下面的“代码”console.log(error.column);console.log(error.message);console.log(error.line);
  }
  else {console.log(result.css.toString());console.log(result.stats);console.log(result.map.toString());//或者更好console.log(JSON.stringify(result.地图））; // 注意，JSON.stringify 也接受 Buffer
  }});// 或 var 结果 = sass.renderSync({
  文件：'/path/to/file.scss',
  数据：'主体{背景：蓝色; a{颜色:黑色;}}',
  输出样式：'压缩'，
  outFile: '/to/my/output.css',
  sourceMap: true, // 或绝对或相对（到 outFile）路径
  importer: function(url, prev, did) {// url 是导入时原样的路径，LibSass 遇到的。 // prev 是之前解析的路径。 // did 是一个可选的回调，要么消费它，要么同步返回值.// this.options 包含此选项 hashsomeAsyncFunction(url, prev, function(result){ did({file: result.path, // 仅需要其中一个，请参阅特殊行为.contents: result.data }) ;});// ORvar result = someSyncFunction(url, prev);return {file: result.path, content: result.data};
  }});console.log(result.css);console.log(result.map);console.log(result.stats);

特殊行为

  • 在同时设置了file和data选项的情况下，node-sass 将优先考虑data并使用file来计算 sourcemap 中的路径。

版本信息 (>= v2.0.0)

现在， node-sass和libsass版本信息都通过info方法公开：

 var sass = require('node-sass');console.log(sass.info);/* 它将输出如下内容：node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Sass Compiler) [ C/C++]*/

由于 node-sass >=v3.0.0 LibSass 版本是在运行时确定的。

集成

社区在构建工具和框架中使用 Node-sass 的列表。

括号延伸

@jasonsanjose 创建了一个基于 node-sass 的 Brackets 扩展：https://github.com/jasonsanjose/brackets-sass。编辑 Sass 文件时，扩展会在保存时编译更改。该扩展还与实时预览集成，可以在浏览器中显示 Sass 更改，而无需保存或编译。

早午餐插件

Brunch 的官方 sass 插件默认使用 node-sass，如果检测到使用 Compass，则自动回退到 ruby​​：https://github.com/brunch/sass-brunch

Connect/Express 中间件

为基于 connect 和 express 的 http 服务器自动重新编译.scss文件。

此功能已移至node-sass-middleware

文档板插件

@10xLaCroixDrinker 编写了一个 DocPad 插件，使用 node-sass 编译.scss文件：https://github.com/docpad/docpad-plugin-nodesass

Duo.js 扩展

@stephenway 创建了一个扩展，可以使用 node-sass 和 duo.js 将 Sass 转换为 CSS https://github.com/duojs/sass

Grunt 扩展

@sindresorhus 创建了一组基于 node-sass 的 grunt 任务：https://github.com/sindresorhus/grunt-sass

吞咽扩展

@dlmanning 创建了一个基于 node-sass 的 gulp sass 插件：https://github.com/dlmanning/gulp-sass

竖琴

@sintaxi 的 Harp Web 服务器使用 node-sass 隐式编译.scss文件：https://github.com/sintaxi/harp

金属匠插件

@stevenschobert 创建了一个基于node-sass的metalsmith插件：https://github.com/stevenschobert/metalsmith-sass

流星插件

@fourseven 创建了一个基于node-sass的meteor插件：https://github.com/fourseven/meteor-scss

含羞草模块

@dbashford 为 sass 创建了一个 Mimosa 模块，其中包括 node-sass：https://github.com/dbashford/mimosa-sass

示例应用程序

这里还有一个示例连接应用程序：https://github.com/andrew/node-sass-example

重建二进制文件

Node-sass 包含适用于流行平台的预编译二进制文件，要为您的平台添加二进制文件，请按照以下步骤操作：

查看该项目：

 git clone --recursive https://github.com/sass/node-sass.gitcd node-sass
npm 安装
node scripts/build -f # 使用 -d 开关进行调试发布# 如果成功，它将生成并移动 # 供应商目录中的二进制文件。

命令行界面

在此阶段，命令行使用界面相当简单，如以下使用部分所示。

如果省略--output标志，输出将发送到 stdout。

用法

node-sass [options] [output]或者： cat | node-sass > output

例子：

node-sass src/style.scss dest/style.css

选项：

    -w, --watch 监视目录或文件
    -r, --recursive 递归地监视目录或文件
    -o, --output 输出目录
    -x, --omit-source-map-url 从输出中省略源映射 URL 注释
    -i, --indented-syntax 将来自 stdin 的数据视为 sass 代码（与 scss 相对）
    -q, --quiet 禁止日志输出，错误除外
    -v, --version 打印版本信息
    --output-style CSS输出样式（嵌套|扩展|紧凑|压缩）
    --indent-type 输出 CSS 的缩进类型（空格 | 制表符）
    --indent-width 缩进宽度；空格或制表符的数量（最大值：10）
    --linefeed 换行样式 (cr | crlf | lf | lfcr)
    --source-comments 在输出中包含调试信息
    --source-map 发出源映射
    --source-map-contents 在地图中嵌入包含内容
    --source-map-embed 将 sourceMappingUrl 嵌入为数据 URI
    --source-map-root 基本路径，将按原样在 source-map 中发出
    --include-path 查找导入文件的路径
    --follow 关注符号链接目录
    -- precision 十进制数允许的精度
    --error-bell 出现错误时输出响铃字符
    --importer 包含自定义导入器的 .js 文件的路径
    --functions 包含自定义函数的 .js 文件的路径
    --help 打印使用信息

input可以是单个.scss或.sass ，也可以是一个目录。如果输入是目录，则还必须提供--output标志。

另外，请注意--importer采用 js 文件的（绝对或相对于 pwd）路径，该文件需要将默认的module.exports设置为导入器函数。例如，请参阅我们的测试装置。

--source-map选项接受布尔值，在这种情况下，它将用.css.map替换目标扩展名。它还接受.map文件的路径，甚至是所需目录的路径。编译目录时--source-map可以是布尔值或目录。

二进制配置参数

node-sass 支持不同的配置参数来更改与 sass 二进制文件相关的设置，例如二进制文件名称、二进制文件路径或备用下载路径。 Node-sass 支持以下参数：

变量名.npmrc 参数过程参数价值
SASS_BINARY_NAME sass_binary_name --sass-二进制名称小路
SASS_BINARY_SITE sass_binary_site --sass-二进制站点网址
SASS_BINARY_PATH sass_二进制_路径--sass-二进制路径小路
SASS_BINARY_DIR sass_binary_dir --sass-二进制-dir小路
SASS_REJECT_UNAUTHORIZED sass_reject_unauthorized --sass-拒绝-未经授权价值

这些参数可以用作环境变量：

  • 例如export SASS_BINARY_SITE=http://example.com/

作为本地或全局 .npmrc 配置文件：

  • 例如sass_binary_site=http://example.com/

作为过程参数：

  • 例如npm install node-sass --sass-binary-site=http://example.com/

如果您对二进制文件使用自签名证书，则SASS_REJECT_UNAUTHORIZED将覆盖 (rejectUnauthorized)[https://nodejs.org/docs/latest/api/tls.html#tls_tls_createserver_options_secureconnectionlistener]。

安装后构建

安装仅运行两个 Mocha 测试，以查看您的计算机是否可以使用预构建的 LibSass，这将在安装过程中节省一些时间。如果任何测试失败，它将从源代码构建。

维护者

该模块由以下人员提供给您并由以下人员维护：

  • Michael Mifsud - 项目负责人（Github / Twitter）

  • 安德鲁·内斯比特（Github / Twitter）

  • 毛院长（Github / Twitter）

  • 布雷特·威尔金斯（Github / Twitter）

  • 基思·西克尔（Github / Twitter）

  • 洛朗·戈德尔（Github / Twitter）

  • 尼克·舍宁（Github / Twitter）

  • 阿迪尔·穆贾希德（Github / Twitter）

贡献者

我们 <3 个贡献者！特别感谢所有为此项目付出开发时间的人们，我们非常感谢你们的辛勤工作。您可以在此处找到这些人的完整列表。

关于补丁/拉取请求的注意事项

查看我们的贡献指南

版权

版权所有 (c) 2015 安德鲁·内斯比特。有关详细信息，请参阅许可证。

展开
附加信息
相关版本
为您推荐
相关资讯 全部
网友评论