Node sass

node-sass

Install command:

JavaScript implementation of a Sass compiler

https://github.com/sass/dart-sass

License: MIT

(JSON API)

(Bottle JSON API)

Formula code on GitHub

Bottle (binary package) installation support provided for macOS releases:

Intel big sur
catalina
mojave
64-bit linux
Apple Silicon big sur

Current versions:

Depends on:

node16.12.0Platform built on V8 to build network applications

Analytics:

Installs (30 days)
1,498
Installs on Request (30 days)
1,497
Build Errors (30 days)
0
Installs (90 days)
4,959
Installs on Request (90 days)
4,953
Installs (365 days)
12,558
Installs on Request (365 days)
12,539
Sours: https://formulae.brew.sh/formula/node-sass

LibSass is Deprecated

Posted 26 October 2020 by Natalie Weizenbaum

After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the most recent new language feature was added in November 2018). As much as we’ve hoped to see this pattern turn around, even the excellent work of long-time LibSass contributors Michael Mifsud and Marcel Greter couldn’t keep up with the fast pace of language development in both CSS and Sass.

I’ll go into detail about what this means below, but here are the major points:

  • We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.

  • We recommend all existing LibSass users make plans to eventually move onto Dart Sass, and that all Sass libraries make plans to eventually drop support for LibSass.

  • We’re no longer planning to add any new features to LibSass, including compatibility with new CSS features.

  • LibSass and Node Sass will continue to be maintained indefinitely on a best-effort basis, including fixing major bugs and security issues and maintaining compatibility with the latest Node versions.

Why deprecate? permalinkWhy deprecate?

For several years now, Sass has managed to exist in an ambiguous kind of state where LibSass was an officially-supported implementation in theory, but its feature surface was static in practice. As time has gone on, it’s becoming increasingly clear that this state causes substantial concrete problems for Sass users. For example, we regularly see users confused as to why plain-CSS  and don’t work and assuming Sass as a whole is at fault, when in fact it’s only LibSass that doesn’t support that feature.

Official support for LibSass doesn’t just cause pain for individual users. Because LibSass doesn’t support the Sass module system that launched last year, major shared Sass libraries have been unable to use it for fear that their downstream users would be incompatible. By clearly indicating that all Sass users should eventually move off of LibSass, we hope to make it more feasible for these library authors to use more modern features.

LibSass has even inhibited the development of the Sass language itself. We’ve been unable to move forward with the proposal for treating as a separator because any code they’d write would either produce deprecation warnings in Dart Sass or fail to compile in LibSass. By marking LibSass as deprecated, this becomes much more feasible, and Sass becomes much better at supporting the latest versions of CSS.

What does “deprecated” mean? permalinkWhat does “deprecated” mean?

We’re choosing to use the term “deprecated” because it carries a lot of weight in the programming community, and provides a strong signal that users should start planning to move away from LibSass. However, it doesn’t mean that the project is entirely dead. Michael Mifsud, the lead maintainer of LibSass and Node Sass, has affirmed that he plans to continue maintenance on the same level as the past few years. This means that although there will be no more features added (and as such LibSass will slowly drift further and further out of compatibility with the latest CSS and Sass syntax), there will continue to be maintenance releases indefinitely.

What about portability and performance? permalinkWhat about portability and performance?

LibSass today has two major benefits over Dart Sass:

  • Portability: since it’s written in C++, it’s easy to embed LibSass within other programming languages and provide a native-feeling API.

  • Performance: calling out to LibSass via the C++ API is very fast relative to the speeds of code written directly in scripting languages. In particular, this means LibSass is substantially faster in JavaScript than Dart Sass-compiled-to-JS (although it’s comparable to Dart Sass’s command-line executable).

We’re working on addressing both of those with the Sass embedded protocol, which runs a Sass compiler as a subprocess that can communicate with any host language via message-passing. The embedded protocol supports all the features of a native Sass API, including the ability to define custom importers and Sass functions, while also providing the high performance of the CLI app. Dart Sass has already implemented the compiler side of the embedded protocol, and a JavaScript host for it is in active development.

How do I migrate? permalinkHow do I migrate?

If you’re a user of Node Sass, migrating to Dart Sass is straightforward: just replace in your file with . Both packages expose the same JavaScript API.

If you’re using the SassC command-line interface, you can switch to Dart Sass’s CLI. Note that this doesn’t have exactly the same interface as SassC, so you may need to change a few flags.

If you’re using LibSass through a wrapper library in another language, you can either switch to the Dart Sass CLI or ask the maintainer of the LibSass wrapper to convert it to a host for the Sass embedded protocol. The embedded protocol allows any language to provide a native API that calls out to Dart Sass.

Please note that because activity on LibSass has been low for several years, it has a number of outstanding bugs and behavioral variations from the Sass spec. You may need to make minor updates to stylesheets to make them compatible with Dart Sass. See this list of major compatibility issues for reference.

Thank you permalinkThank you

Finally, I want to thank everyone who’s put so much time and energy into LibSass and Node Sass over the years. It will always be a towering achievement, and Sass’s popularity outside of the Ruby community is undoubtedly due in large part to its existence. Many people have tried to implement Sass only to find that the language is much deeper and more complex than they expected, and LibSass alone among all of those implementations managed to become fully-featured enough to provide real value for thousands if not millions of users. These maintainers deserve to be proud of that work, and I hope they’ll always consider themselves part of the Sass community going forward.

Sours: https://sass-lang.com/blog/libsass-is-deprecated
  1. Fursuit partial prices
  2. Pkgi download
  3. Line friends shipping
  4. Flipped normals

node-sass

Warning:LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

Node version support policy

  1. Supported Node.js versions vary by release, please consult the releases page.
  2. Node versions that hit end of life https://github.com/nodejs/Release, will be dropped from support at each node-sass release (major, minor).
  3. We will stop building binaries for unsupported releases, testing for breakages in dependency compatibility, but we will not block installations for those that want to support themselves.
  4. New node release require minor internal changes along with support from CI providers (AppVeyor, GitHub Actions). We will open a single issue for interested parties to subscribe to, and close additional issues.

Below is a quick guide for minimum and maximum supported versions of node-sass:

NodeJSSupported node-sass versionNode Module
Node 166.0+93
Node 155.0+88
Node 144.14+83
Node 134.13+, <5.079
Node 124.12+72
Node 114.10+, <5.067
Node 104.9+, <6.064
Node 84.5.3+, <5.057
Node <8<5.0<57
Sass logo

AlpineLinuxmacOSWindows x64LintingWindows x86Coverage Status

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

Find it on npm: https://www.npmjs.com/package/node-sass

Follow @nodesass on twitter for release updates: https://twitter.com/nodesass

Install

Some users have reported issues installing on Ubuntu due to being registered to another package. Follow the official NodeJS docs to install NodeJS so that correctly resolves.

Compiling on Windows machines requires the node-gyp prerequisites.

Are you seeing the following error? Check out our Troubleshooting guide.**

Having installation troubles? Check out our Troubleshooting guide.

Install from mirror in China

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org npm install node-sass

Usage

varsass=require('node-sass');sass.render({file: scss_filename,[,options..]}, function(err, result){/*...*/});// ORvarresult=sass.renderSync({data: scss_content[,options..]});

Options

file

  • Type:
  • Default:

Special: or must be specified

Path to a file for LibSass to compile.

data

  • Type:
  • Default:

Special: or must be specified

A string to pass to LibSass to compile. It is recommended that you use in conjunction with this so that LibSass can find files when using the directive.

importer (>= v2.0.0) - experimental

This is an experimental LibSass feature. Use with caution.

  • Type: signature
  • Default:

Function Parameters and Information:

  • - the path in import as-is, which LibSass encountered
  • - the previously resolved path
  • - a callback function to invoke on async completion, takes an object literal containing
    • - an alternate path for LibSass to use OR
    • - the imported contents (for example, read from memory or the file system)

Handles when LibSass encounters the directive. A custom importer allows extension of the LibSass engine in both a synchronous and asynchronous manner. In both cases, the goal is to either or call with an object literal. Depending on the value of the object literal, one of two things will happen.

When returning or calling with , the new file path will be assumed for the . It's recommended to be mindful of the value of in instances where relative path resolution may be required.

When returning or calling with , the string value will be used as if the file was read in through an external source.

Starting from v3.0.0:

  • refers to a contextual scope for the immediate run of or

  • importers can return error and LibSass will emit that error in response. For instance:

    done(newError('doesn\'t exist!'));// or return synchronouslyreturnnewError('nothing to do here');
  • importer can be an array of functions, which will be called by LibSass in the order of their occurrence in array. This helps user specify special importer for particular kind of path (filesystem, http). If an importer does not want to handle a particular path, it should return . See functions section for more details on Sass types.

functions (>= v3.0.0) - experimental

This is an experimental LibSass feature. Use with caution.

is an that holds a collection of custom functions that may be invoked by the sass files being compiled. They may take zero or more input parameters and must return a value either synchronously () or asynchronously (). Those parameters will be instances of one of the constructors contained in the hash. The return value must be of one of these types as well. See the list of available types below:

types.Number(value [, unit = ""])

  • / : gets / sets the numerical portion of the number
  • / : gets / sets the unit portion of the number

types.String(value)

  • / : gets / sets the enclosed string

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

  • / : red component (integer from to )
  • / : green component (integer from to )
  • / : blue component (integer from to )
  • / : alpha component (number from to )

Example:

varColor=require('node-sass').types.Color,c1=newColor(255,0,0),c2=newColor(0xff0088cc);

types.Boolean(value)

  • : gets the enclosed boolean
  • : Singleton instance of that holds "true"
  • : Singleton instance of that holds "false"

types.List(length [, commaSeparator = true])

  • / : must itself be an instance of one of the constructors in .
  • / : whether to use commas as a separator

types.Map(length)

  • /
  • /

types.Null()

  • : Singleton instance of .

Example

sass.renderSync({data: '#{headings(2,5)} { color: #08c; }',functions: {'headings($from: 0, $to: 6)': function(from,to){vari,f=from.getValue(),t=to.getValue(),list=newsass.types.List(t-f+1);for(i=f;i<=t;i++){list.setValue(i-f,newsass.types.String('h'+i));}returnlist;}}});

includePaths

  • Type:
  • Default:

An array of paths that LibSass can look in to attempt to resolve your declarations. When using , it is recommended that you use this.

indentedSyntax

  • Type:
  • Default:

values enable Sass Indented Syntax for parsing the data string or file.

Note: node-sass/libsass will compile a mixed library of scss and indented syntax (.sass) files with the Default setting (false) as long as .sass and .scss extensions are used in filenames.

indentType (>= v3.0.0)

  • Type:
  • Default:

Used to determine whether to use space or tab character for indentation.

indentWidth (>= v3.0.0)

  • Type:
  • Default:
  • Maximum:

Used to determine the number of spaces or tabs to be used for indentation.

linefeed (>= v3.0.0)

Used to determine whether to use , , or sequence for line break.

omitSourceMapUrl

  • Type:
  • Default:

Special: When using this, you should also specify to avoid unexpected behavior.

values disable the inclusion of source map information in the output file.

outFile

  • Type:
  • Default:

Special: Required when is a truthy value

Specify the intended location of the output file. Strongly recommended when outputting source maps so that they can properly refer back to their intended files.

Attention enabling this option will not write the file on disk for you, it's for internal reference purpose only (to generate the map for example).

Example on how to write it on the disk

sass.render({ ... outFile: yourPathTotheFile,},function(error,result){// node-style callback from v3.0.0 onwardsif(!error){// No errors during the compilation, write this result on the diskfs.writeFile(yourPathTotheFile,result.
Sours: https://github.com/sass/node-sass

npm

A pure JavaScript implementation of Sass. Sass makes CSS fun again.

This package is a distribution of Dart Sass, compiled to pure JavaScript with no native code or external dependencies. It provides a command-line executable and a Node.js API.

Usage

You can install Sass globally using which will provide access to the executable. You can also add it to your project using . This provides the executable as well as a library:

varsass=require('sass');sass.render({file: scss_filename},function(err,result){/* ... */});// ORvarresult=sass.renderSync({file: scss_filename});

See below for details on Dart Sass's JavaScript API.

API

When installed via npm, Dart Sass supports a JavaScript API that's fully compatible with Node Sass (with a few exceptions listed below), with support for both the and functions. See the Sass website for full API documentation!

Note however that is more than twice as fast as due to the overhead of asynchronous callbacks. Both and support the following options:

No support is intended for the following options:

  • . Dart Sass defaults to a sufficiently high precision for all existing browsers, and making this customizable would make the code substantially less efficient.

  • . Source maps are the recommended way of locating the origin of generated selectors.

See Also

  • Dart Sass, from which this package is compiled, can be used either as a stand-alone executable or as a Dart library. Running Dart Sass on the Dart VM is substantially faster than running the pure JavaScript version, so this may be appropriate for performance-sensitive applications. The Dart API is also (currently) more user-friendly than the JavaScript API. See the Dart Sass README for details on how to use it.

  • Node Sass, which is a wrapper around LibSass, the C++ implementation of Sass. Node Sass supports the same API as this package and is also faster (although it's usually a little slower than Dart Sass). However, it requires a native library which may be difficult to install, and it's generally slower to add features and fix bugs.

Behavioral Differences from Ruby Sass

There are a few intentional behavioral differences between Dart Sass and Ruby Sass. These are generally places where Ruby Sass has an undesired behavior, and it's substantially easier to implement the correct behavior than it would be to implement compatible behavior. These should all have tracking bugs against Ruby Sass to update the reference behavior.

  1. only accepts simple selectors, as does the second argument of . See issue 1599.

  2. Subject selectors are not supported. See issue 1126.

  3. Pseudo selector arguments are parsed as s rather than having a more limited custom parsing. See issue 2120.

  4. The numeric precision is set to 10. See issue 1122.

  5. The indented syntax parser is more flexible: it doesn't require consistent indentation across the whole document. See issue 2176.

  6. Colors do not support channel-by-channel arithmetic. See issue 2144.

  7. Unitless numbers aren't to unit numbers with the same value. In addition, map keys follow the same logic as -equality. See issue 1496.

  8. and alpha values with percentage units are interpreted as percentages. Other units are forbidden. See issue 1525.

  9. Too many variable arguments passed to a function is an error. See issue 1408.

  10. Allow to reach outside a media query if there's an identical defined outside that query. This isn't tracked explicitly, because it'll be irrelevant when issue 1050 is fixed.

  11. Some selector pseudos containing placeholder selectors will be compiled where they wouldn't be in Ruby Sass. This better matches the semantics of the selectors in question, and is more efficient. See issue 2228.

  12. The old-style syntax is not supported in the indented syntax. See issue 2245.

  13. The reference combinator is not supported. See issue 303.

  14. Universal selector unification is symmetrical. See issue 2247.

  15. doesn't produce an error if it matches but fails to unify. See issue 2250.

  16. Dart Sass currently only supports UTF-8 documents. We'd like to support more, but Dart currently doesn't support them. See dart-lang/sdk#11744, for example.

Disclaimer: this is not an official Google product.

Sours: https://www.npmjs.com/package/sass

Sass node

Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0

TL;DR

    Or, if using Yarn (default in newer CRA versions)


      Edit2: sass-loader v10.0.5 fixes it. The problem is you might not be using it as a project dependency, but more as a dependency of your dependencies. CRA uses a fixed version, angular-cli locks to node-sass v4, and so on.

      The recommendation for now is: if you're installing just node-sass, check the below workaround (and the note). If you're working on a blank project and you can manage your Webpack configuration (not using CRA or a CLI to scaffold your project), install the latest sass-loader.


      Edit: this error comes from sass-loader. There is a semantic versioning mismatch since node-sass @latest is v5.0.0 and sass-loader expects ^4.0.0.

      There is an open issue on their repository with an associated fix that needs to be reviewed. Until then, refer to the solution below.


      Workaround: don't install node-sass 5.0.0 yet (the major version was just bumped).

      Uninstall node-sass

      Then install the latest version (before 5.0)


      Note: LibSass (hence node-sass as well) is deprecated and dart-sass is the recommended implementation. You can use instead, which is a Node.js distribution of dart-sass compiled to pure JavaScript.

      Be warned though:

      Be careful using this approach. React-scripts uses sass-loader v8, which prefers node-sass to sass (which has some syntax not supported by node-sass). If both are installed and the user worked with sass, this could lead to errors on CSS compilation

      Sours: https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

      Node Sass tutorial

      last modified October 18, 2021

      Node Sass tutorial shows how to work with a node-sass module. The node-sass module is used to translate the Sass code into CSS code.

      Sass

      is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Sass contains two syntaxes. The older syntax uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like CSS. It uses braces to denote code blocks and semicolons to separate lines within a block.

      The indented syntax and SCSS files are traditionally given the extensions and , respectively.

      Node-sass

      Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows us to natively compile SCSS files to CSS.

      Node Sass example

      In the following example, we create a simple web project that uses the module.

      $ mkdir sass $ mkdir -p public/css

      In the project directory, we create three subdirectories. In the directory, we will have SCSS code. The SCSS code is translated into CSS and moved into the directory.

      $ npm init -y

      We initiate a new Node application.

      $ npm i node-sass

      We install the module. We use the module to watch the SCSS files and automatically translate them into CSS code.

      $ npm install -g live-server

      In addition, we install , which is a little development server with live reload capability.

      package.json

      { "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" } }

      In the file, we create a script that runs the module. It will watch the directory and output the compiled code into the directory.

      public/index.html

      <!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>

      This is an HTML file with some data. This document is styled with a CSS file.

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

      The CSS code is loaded from directory.

      sass/main.scss

      $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; }

      This is our SCSS code. We style the container and the table. The code uses two important SCSS capabilities: variables and nesting.

      The following commands are run in separate terminals; they start two running processes.

      $ npm run sass

      We run the script.

      $ live-server --open=public

      Finally, we start the development server. Now modify the file.

      Sample application

      In this tutorial, we have worked with the module. We used the module in a simple web application to compile its SCSS code into CSS code.

      List all JavaScript tutorials.

      Sours: https://zetcode.com/javascript/nodesass/

      You will also like:

      npm

      Warning:LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.

      Node version support policy

      1. Supported Node.js versions vary by release, please consult the releases page.
      2. Node versions that hit end of life https://github.com/nodejs/Release, will be dropped from support at each node-sass release (major, minor).
      3. We will stop building binaries for unsupported releases, testing for breakages in dependency compatibility, but we will not block installations for those that want to support themselves.
      4. New node release require minor internal changes along with support from CI providers (AppVeyor, GitHub Actions). We will open a single issue for interested parties to subscribe to, and close additional issues.

      Below is a quick guide for minimum and maximum support supported version of node-sass:

      NodeJSSupported node-sass versionNode Module
      Node 166.0+93
      Node 155.0+88
      Node 144.14+83
      Node 134.13+, <5.079
      Node 124.12+72
      Node 114.10+, <5.067
      Node 104.9+, <6.064
      Node 84.5.3+, <5.057
      Node <8<5.0<57
      Sass logo

      AlpineLinuxmacOSWindows x64LintingWindows x86Coverage Status

      Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

      It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

      Find it on npm: https://www.npmjs.com/package/node-sass

      Follow @nodesass on twitter for release updates: https://twitter.com/nodesass

      Install

      Some users have reported issues installing on Ubuntu due to being registered to another package. Follow the official NodeJS docs to install NodeJS so that correctly resolves.

      Compiling on Windows machines requires the node-gyp prerequisites.

      Are you seeing the following error? Check out our Troubleshooting guide.**

      Having installation troubles? Check out our Troubleshooting guide.

      Install from mirror in China

      npm install -g mirror-config-china --registry=http://registry.npm.taobao.org npm install node-sass

      Usage

      varsass=require('node-sass');sass.render({file: scss_filename,[,options..]}, function(err, result){/*...*/});// ORvarresult=sass.renderSync({data: scss_content[,options..]});

      Options

      file

      • Type:
      • Default:

      Special: or must be specified

      Path to a file for LibSass to compile.

      data

      • Type:
      • Default:

      Special: or must be specified

      A string to pass to LibSass to compile. It is recommended that you use in conjunction with this so that LibSass can find files when using the directive.

      importer (>= v2.0.0) - experimental

      This is an experimental LibSass feature. Use with caution.

      • Type: signature
      • Default:

      Function Parameters and Information:

      • - the path in import as-is, which LibSass encountered
      • - the previously resolved path
      • - a callback function to invoke on async completion, takes an object literal containing
        • - an alternate path for LibSass to use OR
        • - the imported contents (for example, read from memory or the file system)

      Handles when LibSass encounters the directive. A custom importer allows extension of the LibSass engine in both a synchronous and asynchronous manner. In both cases, the goal is to either or call with an object literal. Depending on the value of the object literal, one of two things will happen.

      When returning or calling with , the new file path will be assumed for the . It's recommended to be mindful of the value of in instances where relative path resolution may be required.

      When returning or calling with , the string value will be used as if the file was read in through an external source.

      Starting from v3.0.0:

      • refers to a contextual scope for the immediate run of or

      • importers can return error and LibSass will emit that error in response. For instance:

        done(newError('doesn\'t exist!'));// or return synchronouslyreturnnewError('nothing to do here');
      • importer can be an array of functions, which will be called by LibSass in the order of their occurrence in array. This helps user specify special importer for particular kind of path (filesystem, http). If an importer does not want to handle a particular path, it should return . See functions section for more details on Sass types.

      functions (>= v3.0.0) - experimental

      This is an experimental LibSass feature. Use with caution.

      is an that holds a collection of custom functions that may be invoked by the sass files being compiled. They may take zero or more input parameters and must return a value either synchronously () or asynchronously (). Those parameters will be instances of one of the constructors contained in the hash. The return value must be of one of these types as well. See the list of available types below:

      types.Number(value [, unit = ""])

      • / : gets / sets the numerical portion of the number
      • / : gets / sets the unit portion of the number

      types.String(value)

      • / : gets / sets the enclosed string

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

      • / : red component (integer from to )
      • / : green component (integer from to )
      • / : blue component (integer from to )
      • / : alpha component (number from to )

      Example:

      varColor=require('node-sass').types.Color,c1=newColor(255,0,0),c2=newColor(0xff0088cc);

      types.Boolean(value)

      • : gets the enclosed boolean
      • : Singleton instance of that holds "true"
      • : Singleton instance of that holds "false"

      types.List(length [, commaSeparator = true])

      • / : must itself be an instance of one of the constructors in .
      • / : whether to use commas as a separator

      types.Map(length)

      • /
      • /

      types.Null()

      • : Singleton instance of .

      Example

      sass.renderSync({data: '#{headings(2,5)} { color: #08c; }',functions: {'headings($from: 0, $to: 6)': function(from,to){vari,f=from.getValue(),t=to.getValue(),list=newsass.types.List(t-f+1);for(i=f;i<=t;i++){list.setValue(i-f,newsass.types.String('h'+i));}returnlist;}}});

      includePaths

      • Type:
      • Default:

      An array of paths that LibSass can look in to attempt to resolve your declarations. When using , it is recommended that you use this.

      indentedSyntax

      • Type:
      • Default:

      values enable Sass Indented Syntax for parsing the data string or file.

      Note: node-sass/libsass will compile a mixed library of scss and indented syntax (.sass) files with the Default setting (false) as long as .sass and .scss extensions are used in filenames.

      indentType (>= v3.0.0)

      • Type:
      • Default:

      Used to determine whether to use space or tab character for indentation.

      indentWidth (>= v3.0.0)

      • Type:
      • Default:
      • Maximum:

      Used to determine the number of spaces or tabs to be used for indentation.

      linefeed (>= v3.0.0)

      Used to determine whether to use , , or sequence for line break.

      omitSourceMapUrl

      • Type:
      • Default:

      Special: When using this, you should also specify to avoid unexpected behavior.

      values disable the inclusion of source map information in the output file.

      outFile

      • Type:
      • Default:

      Special: Required when is a truthy value

      Specify the intended location of the output file. Strongly recommended when outputting source maps so that they can properly refer back to their intended files.

      Attention enabling this option will not write the file on disk for you, it's for internal reference purpose only (to generate the map for example).

      Example on how to write it on the disk

      sass.render({ ... outFile: yourPathTotheFile,},function(error,result){// node-style callback from v3.0.0 onwardsif(!error){// No errors during the compilation, write this result on the diskfs.writeFile(yourPathTotheFile,result.css,function(err){if(!err){//file written on disk}});}});});

      outputStyle

      • Type:
      • Default:
      • Values: , , ,

      Determines the output format of the final CSS style.

      precision

      Used to determine how many digits after the decimal will be allowed. For instance, if you had a decimal number of and a precision of , the result will be in the final CSS.

      sourceComments

      • Type:
      • Default:

      Enables the line number and file where a selector is defined to be emitted into the compiled CSS as a comment. Useful for debugging, especially when using imports and mixins.

      sourceMap

      • Type:
      • Default:

      Enables source map generation during and .

      When , the value of is used as the target output location for the source map with the suffix appended. If no is set, parameter is ignored.

      When , the value of will be used as the writing location for the file.

      sourceMapContents

      • Type:
      • Default:

      includes the in the source map information

      sourceMapEmbed

      • Type:
      • Default:

      embeds the source map as a data URI

      sourceMapRoot

      • Type:
      • Default:

      the value will be emitted as in the source map information

      Callback (>= v3.0.0)

      node-sass supports standard node style asynchronous callbacks with the signature of . In error conditions, the argument is populated with the error object. In success conditions, the object is populated with an object describing the result of the render call.

      Error Object

      • (String) - The error message.
      • (Number) - The line number of error.
      • (Number) - The column number of error.
      • (Number) - The status code.
      • (String) - The filename of error. In case option was not set (in favour of ), this will reflect the value .

      Result Object

      • (Buffer) - The compiled CSS. Write this to a file, or serve it out as needed.
      • (Buffer) - The source map
      • (Object) - An object containing information about the compile. It contains the following keys:
        • (String) - The path to the scss file, or if the source was not a file
        • (Number) - Date.now() before the compilation
        • (Number) - Date.now() after the compilation
        • (Number) - end - start
        • (Array) - Absolute paths to all related scss files in no particular order.

      Examples

      varsass=require('node-sass');sass.render({file: '/path/to/myFile.scss',data: 'body{background:blue; a{color:black;}}',importer: function(url,prev,done){// url is the path in import as is, which LibSass encountered.// prev is the previously resolved path.// done is an optional callback, either consume it or return value synchronously.// this.options contains this options hash, this.callback contains the node-style callbacksomeAsyncFunction(url,prev,function(result){done({file: result.path,// only one of them is required, see section Special Behaviours.contents: result.data});});// ORvarresult=someSyncFunction(url,prev);return{file: result.path,contents: result.data};},includePaths: ['lib/','mod/'],outputStyle: 'compressed'},function(error,result){// node-style callback from v3.0.0 onwardsif(error){console.log(error.status);// used to be "code" in v2x and belowconsole.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());// or betterconsole.log(JSON.stringify(result.map));// note, JSON.stringify accepts Buffer too}});// ORvarresult=sass.renderSync({file: '/path/to/file.scss',data: 'body{background:blue; a{color:black;}}',outputStyle: 'compressed',outFile: '/to/my/output.css',sourceMap: true,// or an absolute or relative (to outFile) pathimporter: function(url,prev,done){// url is the path in import as is, which LibSass encountered.// prev is the previously resolved path.// done is an optional callback, either consume it or return value synchronously.// this.options contains this options hashsomeAsyncFunction(url,prev,function(result){done({file: result.path,// only one of them is required, see section Special Behaviours.contents: result.data});});// ORvarresult=someSyncFunction(url,prev);return{file: result.path,contents: result.data};}});console.log(result.css);console.log(result.map);console.log(result.stats);

      Special behaviours

      • In the case that both and options are set, node-sass will give precedence to and use to calculate paths in sourcemaps.

      Version information (>= v2.0.0)

      Both and version info is now exposed via the method:

      varsass=require('node-sass');console.log(sass.info);/* it will output something like: node-sass 2.0.1 (Wrapper) [JavaScript] libsass 3.1.0 (Sass Compiler) [C/C++]*/

      Since node-sass >=v3.0.0 LibSass version is determined at run time.

      Integrations

      Listing of community uses of node-sass in build tools and frameworks.

      Brackets extension

      @jasonsanjose has created a Brackets extension based on node-sass: https://github.com/jasonsanjose/brackets-sass. When editing Sass files, the extension compiles changes on save. The extension also integrates with Live Preview to show Sass changes in the browser without saving or compiling.

      Brunch plugin

      Brunch's official sass plugin uses node-sass by default, and automatically falls back to ruby if use of Compass is detected: https://github.com/brunch/sass-brunch

      Connect/Express middleware

      Recompile files automatically for connect and express based http servers.

      This functionality has been moved to in node-sass v1.0.0

      DocPad Plugin

      @10xLaCroixDrinker wrote a DocPad plugin that compiles files using node-sass: https://github.com/10xLaCroixDrinker/docpad-plugin-nodesass

      Duo.js extension

      @stephenway has created an extension that transpiles Sass to CSS using node-sass with duo.jshttps://github.com/duojs/sass

      Grunt extension

      @sindresorhus has created a set of grunt tasks based on node-sass: https://github.com/sindresorhus/grunt-sass

      Gulp extension

      @dlmanning has created a gulp sass plugin based on node-sass: https://github.com/dlmanning/gulp-sass

      Harp

      @sintaxi’s Harp web server implicitly compiles files using node-sass: https://github.com/sintaxi/harp

      Metalsmith plugin

      @stevenschobert has created a metalsmith plugin based on node-sass: https://github.com/stevenschobert/metalsmith-sass

      Meteor plugin

      @fourseven has created a meteor plugin based on node-sass: https://github.com/fourseven/meteor-scss

      Mimosa module

      @dbashford has created a Mimosa module for sass which includes node-sass: https://github.com/dbashford/mimosa-sass

      Example App

      There is also an example connect app here: https://github.com/andrew/node-sass-example

      Rebuilding binaries

      Node-sass includes pre-compiled binaries for popular platforms, to add a binary for your platform follow these steps:

      Check out the project:

      git clone --recursive https://github.com/sass/node-sass.git cd node-sass npm install node scripts/build -f # use -d switch for debug release# if succeeded, it will generate and move# the binary in vendor directory.

      Command Line Interface

      The interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.

      Output will be sent to stdout if the flag is omitted.

      Usage

      Or:

      Example:

      Options:

      -w, --watch Watch a directory or file -r, --recursive Recursively watch directories or files -o, --output Output directory -x, --omit-source-map-url Omit source map URL comment from output -i, --indented-syntax Treat data from stdin as sass code (versus scss) -q, --quiet Suppress log output except on error -v, --version Prints version info --output-style CSS output style (nested | expanded | compact | compressed) --indent-type Indent typefor output CSS (space | tab) --indent-width Indent width; number of spaces or tabs (maximum value: 10) --linefeed Linefeed style (cr | crlf | lf | lfcr) --source-comments Include debug info in output --source-map Emit source map --source-map-contents Embed include contents in map --source-map-embed Embed sourceMappingUrl as data URI --source-map-root Base path, will be emitted in source-map as is --include-path Path to look for imported files --follow Follow symlinked directories --precision The amount of precision allowed in decimal numbers --error-bell Output a bell character on errors --importer Path to .js file containing custom importer --functions Path to .js file containing custom functions --help Print usage info

      The can be either a single or , or a directory. If the input is a directory the flag must also be supplied.

      Also, note takes the (absolute or relative to pwd) path to a js file, which needs to have a default set to the importer function. See our test fixtures for example.

      The option accepts a boolean value, in which case it replaces destination extension with . It also accepts path to file and even path to the desired directory. When compiling a directory can either be a boolean value or a directory.

      Binary configuration parameters

      node-sass supports different configuration parameters to change settings related to the sass binary such as binary name, binary path or alternative download path. Following parameters are supported by node-sass:

      Variable name.npmrc parameterProcess argumentValue
      SASS_BINARY_NAMEsass_binary_name--sass-binary-namepath
      SASS_BINARY_SITEsass_binary_site--sass-binary-siteURL
      SASS_BINARY_PATHsass_binary_path--sass-binary-pathpath
      SASS_BINARY_DIRsass_binary_dir--sass-binary-dirpath

      These parameters can be used as environment variable:

      • E.g.

      As local or global .npmrc configuration file:

      • E.g.

      As a process argument:

      • E.g.

      Post-install Build

      Install runs only two Mocha tests to see if your machine can use the pre-built LibSass which will save some time during install. If any tests fail it will build from source.

      Maintainers

      This module is brought to you and maintained by the following people:

      Contributors

      We <3 our contributors! A special thanks to all those who have clocked in some dev time on this project, we really appreciate your hard work. You can find a full list of those people here.

      Note on Patches/Pull Requests

      Check out our Contributing guide

      Copyright

      Copyright (c) 2015 Andrew Nesbitt. See LICENSE for details.

      Sours: https://www.npmjs.com/package/node-sass


      1427 1428 1429 1430 1431