{"id":15818751,"url":"https://github.com/OlehDutchenko/gulp-sass-monster","last_synced_at":"2025-10-16T15:30:32.761Z","repository":{"id":57258906,"uuid":"102579418","full_name":"OlehDutchenko/gulp-sass-monster","owner":"OlehDutchenko","description":"Gulp plugin for node-sass with steroids. The project is a revised version of gulp-sass and updated gulp-sass-extended","archived":false,"fork":false,"pushed_at":"2018-12-13T08:45:35.000Z","size":147,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-06T02:43:25.141Z","etag":null,"topics":["gulp","gulp-sass","gulp4","gulpplugin","libsass","node-sass","sass","sass-variables","scss"],"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/OlehDutchenko.png","metadata":{"files":{"readme":"README-RU.md","changelog":"CHANGELOG-RU.md","contributing":"CONTRIBUTING-RU.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT-RU.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-06T07:49:17.000Z","updated_at":"2018-12-13T08:45:00.000Z","dependencies_parsed_at":"2022-08-28T21:41:46.906Z","dependency_job_id":null,"html_url":"https://github.com/OlehDutchenko/gulp-sass-monster","commit_stats":null,"previous_names":["dutchenkooleg/gulp-sass-monster"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlehDutchenko%2Fgulp-sass-monster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlehDutchenko%2Fgulp-sass-monster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlehDutchenko%2Fgulp-sass-monster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlehDutchenko%2Fgulp-sass-monster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OlehDutchenko","download_url":"https://codeload.github.com/OlehDutchenko/gulp-sass-monster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236678115,"owners_count":19187568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-sass","gulp4","gulpplugin","libsass","node-sass","sass","sass-variables","scss"],"created_at":"2024-10-05T06:04:52.016Z","updated_at":"2025-10-16T15:30:27.450Z","avatar_url":"https://github.com/OlehDutchenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-sass-monster\n\n![npm](https://img.shields.io/badge/node-6.3.1-yellow.svg)\n![es2015](https://img.shields.io/badge/ECMAScript-2015_(ES6)-blue.svg)\n![license](https://img.shields.io/badge/License-MIT-orange.svg)\n[![Build Status](https://travis-ci.org/dutchenkoOleg/gulp-sass-monster.svg?branch=master)](https://travis-ci.org/dutchenkoOleg/gulp-sass-monster)\n\n\n:us: [English](./README.md)\n|\n:ru: Русский язык\n\n\u003e _Gulp плагин для [node-sass](https://github.com/sass/node-sass) со стероидами. Проект является переработанной версией [gulp-sass](https://github.com/dlmanning/gulp-sass) и обновлением [gulp-sass-extended](https://github.com/dutchenkoOleg/gulp-sass-extended), который больше не поддерживается_\n\n[![Javascript Style Guide](https://raw.githubusercontent.com/WezomAgency/eslint-config-wezom-relax/master/assets/badge.jpg)](https://github.com/WezomAgency/eslint-config-wezom-relax)\n\n## Установка\n\n```shell\nnpm i --save gulp-sass-monster\n# or using yarn cli\nyarn add gulp-sass-monster\n```\n\n## Пример использования\n\n```js\nconst gulp = require('gulp');\nconst sassMonster = require('gulp-sass-monster');\nconst options = {};\nconst isSync = true;\n\ngulp.task('sass', function () {\n    return gulp.src('./sass/**/*.scss')\n        .pipe(sassMonster(options, isSync).on('error', sassMonster.logError))\n        .pipe(gulp.dest('./css'));\n});\n\ngulp.task('sass:watch', function () {\n    gulp.watch('./sass/**/*.scss', gulp.series('sass')); // gulp#4.x\n});\n```\n\n---\n\n## Параметры\n\nВы можете использовать те же самые параметры как и для [`node-sass`](https://github.com/sass/node-sass#options).  \nИсключением являются два параметра - [`file`](https://github.com/sass/node-sass#file) и [`data`](https://github.com/sass/node-sass#data), которые устанавливает плагин.\n\n### Дополнительные параметры\n\n#### `addVariables`\n\n_тип данных_ `Object`\n|\n_по умолчанию_ `undefined`\n\nДобавляет пользовательские переменные в рендер.\n\n\u003e Этот параметр полезен, только если вы вычисляете некоторые значения и хотите добавить их результат в sass render.  \n\u003e Статические свойства проще устанавливать в самих файлах.\n\nНемного подробностей о значениях для этой опции:\n\n- каждое свойство будет переменной Sass;\n- если свойство будет массивом - это будет [Sass list](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#lists);\n- если свойство будет объектом - это будет [Sass map](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps);\n\n___Примечание.___ У Вас не должно быть более одного уровня вложенности в объектах и массивах. В противном случае Вы можете получить неверные данные.\n\nПример:\n\n```js\nconst gulp = require('gulp');\nconst sassMonster = require('gulp-sass-monster');\nconst sourcemaps = require('gulp-sourcemaps');\nconst options = {\n    addVariables: {\n        PRODUCTION: yourProductionValue, // true for example\n        someOtherDynamicVar: calculatedValue, // '12px' for example \n        myColorsMap: {\n            color1: 'blue',\n            color2: 'yellow',\n        },\n        pointList: [\n            '1024px',\n            '1280px',\n            '1366px'\n        ]\n    }\n};\nconst isSync = true;\n\ngulp.task('sass', function () {\n    return gulp.src('./sass/**/*.scss')\n        .pipe(sassMonster(options, isSync).on('error', sassMonster.logError))\n        .pipe(gulp.dest('./css'));\n});\n```\n\nПеред отправкой на рендер в тело файлов будет добавлен соответствующий код\n\n```scss\n/* generated */ $PRODUCTION: true;\n/* generated */ $someOtherDynamicVar: 12px;\n/* generated */ $myColorsMap: (color1: blue, color2: yellow);\n/* generated */ $pointList: (1024px, 1280px, 1366px);\n/// then your code from file \n```\n\nЕсли файл содержит дериктиву `@charset` (которая по спецификации может находится только в начале файла), блок переменных будет вставлен после нее.\n\n___Влияние на sourcemaps.___  Вы заметите некоторые несоответствия в номерах строк в созданых sourcemaps и оригинальный файлах. Чем больше вы добавляете переменных, тем больше это несоответствие, так как Ваш контент будет сдвинут из-за добавления блока переменных.\n\n#### `afterRender(result, file)`\n\n_тип данных_ `function`\n|\n_по умолчанию_ `undefined`\n\nАргументы\n\n- `result {Object}` - результат [рендера node-sass](https://github.com/sass/node-sass#result-object)\n- `file {Buffer}` - текущий файл рендера\n\nМетод вызывается после успешного рендера. Важно знать что после этого метода, происходит внутренняя обработка данных `result` и составление `sourcemaps` (при необходимости), если Вы будете вносить изменения в  `result` - это повлияет на общий итоговый результат плагина. Используйте его осторожно.\n\n___Пример установки дополнительных вотчей только на импортируемые файлы___\n\n```js\nconst gulp = require('gulp');\nconst sassMonster = require('gulp-sass-monster');\nconst gulpWatchAndTouch = require('gulp-watch-and-touch');\n\nconst sassFileWatcher = gulpWatchAndTouch(gulp);\nconst options = {\n    afterRender (result, file) {\n        let filePath = file.path;\n        let sources = result.stats.includedFiles;\n        let newImports = sassFileWatcher(filePath, filePath, sources);\n        if (newImports) {\n            console.log(`${file.stem} has new imports`);\n        }\n    }\n};\nconst isSync = true;\n\ngulp.task('sass', function () {\n    return gulp.src('./sass/**/*.scss')\n        .pipe(sassMonster(options, isSync).on('error', sassMonster.logError))\n        .pipe(gulp.dest('./css'));\n});\n\ngulp.task('sass:watch', function () {\n    gulp.watch('./sass/**/*.scss', gulp.series('sass')); // gulp#4.x\n});\n```\n\n## isSync\n\nВторой аргумент - это флаг синхроного рендера. Если его не указать как положительное значение - будет выполнен асинхронный рендер.\n\n---\n\n## Source Maps\n\nПлагин поддерживает работу с [`gulp-sourcemaps`](https://github.com/gulp-sourcemaps/gulp-sourcemaps).\n\n```js\nconst gulp = require('gulp');\nconst sassMonster = require('gulp-sass-monster');\nconst sourcemaps = require('gulp-sourcemaps');\nconst options = {};\nconst isSync = true;\n\ngulp.task('sass', function () {\n    return gulp.src('./sass/**/*.scss')\n        .pipe(sourcemaps.init())\n        .pipe(sassMonster(options, isSync).on('error', sassMonster.logError))\n        .pipe(sourcemaps.write())\n        .pipe(gulp.dest('./css'));\n});\n```\n\n---\n\n## Ошибки Sass рендера\n\n`gulp-sass-monster` всего лишь обертка для подготовки файлов и параметров, которые передаются на рендер [`node-sass`](https://github.com/sass/node-sass), а также выполняет обработку его результатов.\n\nЕсли у Вас есть вопросы или проблемы с тем как работает Sass - Вам следует обращется в соответствующие проэкты [`node-sass`](https://github.com/sass/node-sass) и [`libsass`](https://github.com/sass/libsass).\n\nЕсли же у Вас проблемы с работой плагина `gulp-sass-monster` - тогда Вам сюда [`gulp-sass-monster/issues`](https://github.com/dutchenkoOleg/gulp-sass-monster/issues).\n\n---\n\n## Информация о проекте\n\n* [История изменений](./CHANGELOG-RU.md)\n* [Руководство по содействию проекту](./CONTRIBUTING-RU.md)\n* [Кодекс поведения](./CODE_OF_CONDUCT-RU.md)\n* [Лицензия MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOlehDutchenko%2Fgulp-sass-monster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOlehDutchenko%2Fgulp-sass-monster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOlehDutchenko%2Fgulp-sass-monster/lists"}