{"id":18504236,"url":"https://github.com/blakedarlin/gulp-sass","last_synced_at":"2026-01-23T17:31:51.918Z","repository":{"id":257804834,"uuid":"865036022","full_name":"blakedarlin/gulp-sass","owner":"blakedarlin","description":"Gulp plugin for sass/sass-embedded","archived":false,"fork":false,"pushed_at":"2024-09-29T20:27:16.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-22T02:58:59.742Z","etag":null,"topics":["gulp","gulp-plugin","gulp5","sass","sass-embedded"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blakedarlin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-29T20:13:55.000Z","updated_at":"2024-09-29T22:03:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"21f0de44-4759-4fd5-aa65-66cf4ab11aaa","html_url":"https://github.com/blakedarlin/gulp-sass","commit_stats":null,"previous_names":["blakedarlin/gulp-sass"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/blakedarlin/gulp-sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakedarlin%2Fgulp-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakedarlin%2Fgulp-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakedarlin%2Fgulp-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakedarlin%2Fgulp-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blakedarlin","download_url":"https://codeload.github.com/blakedarlin/gulp-sass/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blakedarlin%2Fgulp-sass/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28696683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","gulp-plugin","gulp5","sass","sass-embedded"],"created_at":"2024-11-06T14:03:40.777Z","updated_at":"2026-01-23T17:31:51.910Z","avatar_url":"https://github.com/blakedarlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-sass\n\nGulp plugin for the [sass-embedded](https://github.com/sass/embedded-host-node) package. Compiles files with `sass-embedded`, without the need for an external compiler. Performance is about 3x better than the original `gulp-sass` using the Dart Sass compiler, since the instance can persist between compilations:\n\n\u003e When calling the compile functions multiple times, using a compiler instance with the sass-embedded npm package is much faster than using the top-level compilation methods or the sass npm package.\n\n[Source: Sass Documentation](https://sass-lang.com/documentation/js-api/functions/initcompiler/)\n\n## Installation\n\n```sh\nnpm install @blakedarlin/gulp-sass --save-dev\n```\n\n## Usage\n\n```javascript\nconst gulp = require('gulp');\nconst sass = require('@blakedarlin/gulp-sass');\n\nfunction buildStyles() {\n\treturn gulp.src('./sass/**/*.scss').pipe(sass()).pipe(gulp.dest('./css'));\n}\n\nexports.buildStyles = buildStyles;\nexports.watch = function () {\n\tgulp.watch('./sass/**/*.scss', ['buildStyles']);\n};\n```\n\n### Using `pipeline()` and ES6\n\nThe following example uses Node's stream pipeline, as well as Gulp's built-in [sourcemaps](https://gulpjs.com/docs/en/api/dest/#sourcemaps) support.\n\n```javascript\nimport gulp from 'gulp';\nimport sass from 'gulp-sass';\nimport { pipeline } from 'node:stream/promises';\n\nexport const buildStyles = async (callback) =\u003e\n\tawait pipeline(\n\t\tgulp.src('./sass/**/*.scss', {\n\t\t\tallowEmpty: true,\n\t\t\tsourcemaps: true,\n\t\t}),\n\t\tsass(),\n\t\tgulp.dest('./css', {\n\t\t\tsourcemaps: true,\n\t\t}),\n\t).catch((error) =\u003e callback(error));\n\nconst watch = gulp.watch('./sass/**/*.scss', { delay: 500 }, buildStyles);\nexport default watch;\n```\n\nFor synchronous compiling, use:\n\n```javascript\n\t\tsass.sync(),\n```\n\n### Passing options to Sass\n\n```javascript\nloadPaths?: string[]\nimporters?: (NodePackageImporter | Importer\u003csync\u003e | FileImporter\u003csync\u003e)[]\nfunctions?: Record\u003cstring, CustomFunction\u003csync\u003e\u003e\n```\n\nPassing options to the Gulp Sass plugin will pass them in turn to the Sass compiler. Refer to the [Sass compiler options](https://sass-lang.com/documentation/js-api/interfaces/options/) for more information. To cover a few in this context:\n\n#### [loadPaths](https://sass-lang.com/documentation/js-api/interfaces/options/#loadPaths)\n\nThe compiler accepts a `loadPaths` option, which is a string array of absolute paths. Each file's own parent is automatically added as its first `loadPaths` item, so there is no need to specify it.\n\n```javascript\nsass({\n\tloadPaths: ['/some/absolute/path', '/some/other/absolute/path'],\n});\n```\n\n#### [importers](https://sass-lang.com/documentation/js-api/interfaces/options/#importers)\n\nCustom importers that control how Sass resolves loads from rules like @use and @import. For example, sass-json-importer allows importing JSON records as Sass variables.\n\n```javascript\nimport jsonImporter from 'sass-json-importer';\n\n\t...\n\t\tsass({\n\t\t\timporters: [ jsonImporter() ],\n\t\t})\n\t...\n```\n\n#### [functions](https://sass-lang.com/documentation/js-api/interfaces/options/#functions)\n\nDefine additional built-in Sass functions that are available in all stylesheets. This option takes an object whose keys are Sass function signatures like you'd write for the `@function` rule. No longer is it necessary to use slow collections of Sass @functions or @mixins for basic functionality, such as `string.replace`.\n\nImport and provide your custom function to the Gulp Sass options.\n\n```javascript\n// gulpfile.js\nimport svgInline from './svg-inline.js';\n\t...\n\t\tsass({\n\t\t\tfunctions: {\n\t\t\t\t'svg-inline($filePath, $fill: null, $stroke: null)': svgInline,\n\t\t\t}\n\t\t})\n\t...\n```\n\nThe JavaScript function itself will use Sass's own variable types. Note that any file path will not be resolved using the `loadPaths` option passed to the Sass compiler. Your custom function will need to handle that resolution.\n\n```javascript\n// svg-inline.js\nimport { SassString, sassNull } from 'sass-embedded';\n\nconst svgInline = (arguments_) =\u003e {\n\tconst filePath = arguments_[0].assertString('path').text;\n\tconst fill = arguments_[1] ?? sassNull;\n\tconst stroke = arguments_[2] ?? sassNull;\n\n\tif (filePath \u0026\u0026 !filePath.toLowerCase().endsWith('.svg')) {\n\t\tthrow new Error(\n\t\t\t'Invalid SVG file path provided. Ensure the file path ends with .svg extension.',\n\t\t);\n\t}\n\t// ... import and process the SVG file ...\n\treturn new SassString(\n\t\t`url(\"data:image/svg+xml;charset=utf-8,${encodedSvgContent}\")`,\n\t\t{ quotes: false },\n\t);\n};\nexport default svgInline;\n```\n\n```scss\n@use 'abstracts/form-image' as image;\n\n// Use Sass variables to recolor the fill and stroke. (These can't be CSS custom properties, though.)\n.button \u003e i {\n\tbackground-image: svg-inline(\n\t\t'feather-icons/dist/icons/arrow-right.svg',\n\t\t$stroke: $icon-hover-color\n\t);\n}\n\n// When using a custom function for the value of a CSS custom property, wrap it in #{...}.\n.accordion {\n\t--icon: #{svg-inline('feather-icons/dist/icons/plus.svg')};\n\t--close-icon: #{svg-inline('feather-icons/dist/icons/minus.svg')};\n}\n\n// Using a namespaced Sass variable.\n[type='checkbox']:checked {\n\tmask-image: svg-inline(image.$checkbox-image__checked);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakedarlin%2Fgulp-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblakedarlin%2Fgulp-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblakedarlin%2Fgulp-sass/lists"}