{"id":13817703,"url":"https://github.com/appleboy/gulp-compass","last_synced_at":"2025-04-05T06:08:29.255Z","repository":{"id":12748158,"uuid":"15421313","full_name":"appleboy/gulp-compass","owner":"appleboy","description":"Compass plugin for gulp","archived":false,"fork":false,"pushed_at":"2017-09-13T02:11:53.000Z","size":178,"stargazers_count":170,"open_issues_count":43,"forks_count":54,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T07:23:06.376Z","etag":null,"topics":["compass","compass-plugin","css","gulp-plugin","javascript","sass"],"latest_commit_sha":null,"homepage":null,"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/appleboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-12-24T16:02:27.000Z","updated_at":"2025-03-15T20:58:54.000Z","dependencies_parsed_at":"2022-09-26T16:21:15.329Z","dependency_job_id":null,"html_url":"https://github.com/appleboy/gulp-compass","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleboy%2Fgulp-compass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleboy%2Fgulp-compass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleboy%2Fgulp-compass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleboy%2Fgulp-compass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleboy","download_url":"https://codeload.github.com/appleboy/gulp-compass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294539,"owners_count":20915340,"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":["compass","compass-plugin","css","gulp-plugin","javascript","sass"],"created_at":"2024-08-04T06:00:53.990Z","updated_at":"2025-04-05T06:08:29.234Z","avatar_url":"https://github.com/appleboy.png","language":"JavaScript","funding_links":[],"categories":["Getting Started","Plugins","插件"],"sub_categories":["Overview","Compilation","编译"],"readme":"# [gulp](http://gulpjs.com/)-compass\n\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status](https://travis-ci.org/appleboy/gulp-compass.png?branch=master)](https://travis-ci.org/appleboy/gulp-compass) [![Dependency Status](https://david-dm.org/appleboy/gulp-compass.svg)](https://david-dm.org/appleboy/gulp-compass) [![Coverage Status](https://coveralls.io/repos/appleboy/gulp-compass/badge.svg?branch=master)](https://coveralls.io/r/appleboy/gulp-compass?branch=master)\n\n[![NPM](https://nodei.co/npm/gulp-compass.png?downloads=true\u0026stars=true)](https://nodei.co/npm/gulp-compass/)\n\n\u003e Compile Sass to CSS using Compass\n\n[npm-url]: https://www.npmjs.org/package/gulp-compass\n[npm-image]: http://img.shields.io/npm/v/gulp-compass.svg\n[downloads-image]: http://img.shields.io/npm/dm/gulp-compass.svg\n\n## Requirements\n\n`gulp-compass` requires the compass ruby gem in order to compile compass. This can easily be installed via Terminal.\n\n```\n$ gem update --system\n$ gem install compass\n```\n\nPlease refer the [user guide](http://compass-style.org/install/)\n\n## Installation\n\nInstall with [npm](https://npmjs.org/package/gulp-compass)\n\n```\n$ npm install gulp-compass --save-dev\n```\n\n## Usage\n\n### Load config from config.rb\n\nPlease **make sure** to add ``css`` and ``sass`` options with the same value in ``config.rb`` since ``compass`` can't output css result directly.\n\n* ``css`` default value is ``css``.\n* ``sass`` default value is ``sass``.\n\n```javascript\nvar compass = require('gulp-compass');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(compass({\n      config_file: './config.rb',\n      css: 'stylesheets',\n      sass: 'sass'\n    }))\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\n### Load config without config.rb\n\nset your project path.\n\n```javascript\nvar compass = require('gulp-compass'),\n  path = require('path');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(compass({\n      project: path.join(__dirname, 'assets'),\n      css: 'css',\n      sass: 'sass'\n    }))\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\nset your compass settings.\n\n```javascript\nvar compass = require('gulp-compass'),\n  minifyCSS = require('gulp-minify-css');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(compass({\n      css: 'app/assets/css',\n      sass: 'app/assets/sass',\n      image: 'app/assets/images'\n    }))\n    .pipe(minifyCSS())\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\nSupport multiple require option\n\n```javascript\nvar compass = require('gulp-compass'),\n  minifyCSS = require('gulp-minify-css');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(compass({\n      css: 'app/assets/css',\n      sass: 'app/assets/sass',\n      image: 'app/assets/images',\n      require: ['susy', 'modular-scale']\n    }))\n    .pipe(minifyCSS())\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\nSupport return the output of the Compass as the callback\n\n```javascript\nvar compass = require('gulp-compass'),\n  minifyCSS = require('gulp-minify-css');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(compass({\n      css: 'app/assets/css',\n      sass: 'app/assets/sass',\n      image: 'app/assets/images'\n    }))\n    .on('error', function(error) {\n      // Would like to catch the error here\n      console.log(error);\n      this.emit('end');\n    })\n    .pipe(minifyCSS())\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\n`gulp-compass` with [gulp-plumber](https://github.com/floatdrop/gulp-plumber)\n\n```javascript\nvar compass = require('gulp-compass'),\n  plumber = require('gulp-plumber'),\n  minifyCSS = require('gulp-minify-css');\n\ngulp.task('compass', function() {\n  gulp.src('./src/*.scss')\n    .pipe(plumber({\n      errorHandler: function (error) {\n        console.log(error.message);\n        this.emit('end');\n    }}))\n    .pipe(compass({\n      css: 'app/assets/css',\n      sass: 'app/assets/sass',\n      image: 'app/assets/images'\n    }))\n    .on('error', function(err) {\n      // Would like to catch the error here\n    })\n    .pipe(minifyCSS())\n    .pipe(gulp.dest('app/assets/temp'));\n});\n```\n\n## Configuration\n\n### Configuration Options\n\n#### style\n\n**default:** nested\n\n**description:** The output style for the compiled css.\nOne of: nested, expanded, compact, or compressed.\n\n#### comments\n\n**default:** false\n\n**description:** Show line comments or not.\n\n#### relative\n\n**default:** true\n\n**description:** Are assets relative.\n\n#### css\n\n**default:** css\n\n**description:** The target directory where you keep your css stylesheets. It is relative to the ``project`` option.\n\n#### sass\n\n**default:** sass\n\n**description:** The source directory where you keep your sass stylesheets. It is relative to the ``project`` option.\n\n#### javascript\n\n**default:** js\n\n**description:** The directory where you keep your javascripts. It is relative to the ``project`` option.\n\n#### font\n\n**default:** font\n\n**description:** The directory where you keep your fonts. It is relative to the ``project`` option.\n\n#### project\n\n**default:** your project base\n\n**description:** The location where all your assets are store.\n\n#### logging\n\n**default:** true\n\n**description:** show/hide compile log message.\n\n#### import_path\n\n**default:** false\n\n**format:** ``string`` or ``array``\n\n**description:** The directory where you keep external Compass plugins or extensions that you would like to make available using the `@import` function. Common use case would be setting this to your `bower_components` directory for example. It is relative to the ``project`` option.\n\n#### require\n\n**default:** false\n\n**format:** ``string`` or ``array``\n\n**description:** Require the given Ruby library before running commands. This is used to access Compass plugins without having a project configuration file.\n\n#### load_all\n\n**default:** false\n\n**description:** Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.\n\n#### bundle_exec\n\n**default:** false\n\n**description:** Run compass compile with [bundle exec](http://bundler.io/v1.5/man/bundle-exec.1.html): ``bundle exec compass compile``.\n\n#### sourcemap\n\n**default:** false\n\n**description:** Generate standard JSON source maps.\n\nPS. Past compass versions (prior to 1.0.0) do not support `--sourcemap` flag, please update sass and compass as the following version.\n\n```\n* sass (3.3.3)\n* compass (1.0.1)\n```\n\n#### time\n\n**default:** false\n\n**description:** Display compilation times.\n\n#### debug\n\n**default:** false\n\n**description:** Turns on sass's debuging information.\n\n#### environment\n\n**description:** The environment mode can also be `development` or `production`.\n\n#### http_path\n\n**default:** false\n\n**description:** Set this to the root of your project when deployed.\n\n#### generated_images_path\n\n**default:** false\n\n**description:** GENERATED_IMAGES_PATH. Support `--generated-images-path` parameter.\n\n#### task\n\n**default:** compile\n\n**description:** Support compass primary commands: compile or watch. \n\n\n## Running tests\n\n```\n$ gem install compass\n$ gem install susy\n$ gem install sass-globbing\n$ gem install modular-scale\n$ npm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleboy%2Fgulp-compass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleboy%2Fgulp-compass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleboy%2Fgulp-compass/lists"}