{"id":18121900,"url":"https://github.com/petebrowne/sprockets-sass","last_synced_at":"2025-04-05T07:07:38.581Z","repository":{"id":1690391,"uuid":"2418480","full_name":"petebrowne/sprockets-sass","owner":"petebrowne","description":"Better Sass integration with Sprockets 2.x","archived":false,"fork":false,"pushed_at":"2016-09-28T01:16:17.000Z","size":170,"stargazers_count":89,"open_issues_count":2,"forks_count":29,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T06:08:58.322Z","etag":null,"topics":["ruby","sass","sprockets"],"latest_commit_sha":null,"homepage":"","language":"Ruby","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/petebrowne.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":"2011-09-19T21:31:36.000Z","updated_at":"2024-11-10T19:10:38.000Z","dependencies_parsed_at":"2022-09-03T23:21:30.739Z","dependency_job_id":null,"html_url":"https://github.com/petebrowne/sprockets-sass","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petebrowne%2Fsprockets-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petebrowne%2Fsprockets-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petebrowne%2Fsprockets-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petebrowne%2Fsprockets-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/petebrowne","download_url":"https://codeload.github.com/petebrowne/sprockets-sass/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299833,"owners_count":20916190,"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":["ruby","sass","sprockets"],"created_at":"2024-11-01T06:16:14.938Z","updated_at":"2025-04-05T07:07:38.561Z","avatar_url":"https://github.com/petebrowne.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"sprockets-sass\n==============\n\n[![Gem Version](https://badge.fury.io/rb/sprockets-sass.svg)](https://badge.fury.io/rb/sprockets-sass) [![Build Status](https://travis-ci.org/petebrowne/sprockets-sass.svg?branch=master)](https://travis-ci.org/petebrowne/sprockets-sass) \n\n**Better Sass integration with [Sprockets 2.x](http://github.com/sstephenson/sprockets)**\n\nWhen using Sprockets 2.x with Sass you will eventually run into a pretty big issue. `//= require` directives will not allow Sass mixins, variables, etc. to be shared between files. So you'll try to use `@import`, and that'll also blow up in your face. `sprockets-sass` fixes all of this by creating a Sass::Importer that is Sprockets aware.\n\n**Note: This works in Rails 3.1, thanks to the [sass-rails gem](http://github.com/rails/sass-rails). But if you want to use Sprockets and Sass anywhere else, like Sinatra, use `sprockets-sass`**\n\n### Features\n\n* Imports Sass ```_partials_``` (filenames prepended with ```_```).\n* Import paths work exactly like `require` directives.\n* Imports either Sass syntax, or just regular CSS files.\n* Imported files are preprocessed by Sprockets, so `.css.scss.erb` files can be imported.\n  Directives from within imported files also work as expected.\n* Automatic integration with Compass.\n* Supports glob imports, like sass-rails.\n* Asset path Sass functions. **New in 0.4!**\n\n\nInstallation\n------------\n\n``` bash\n$ gem install sprockets-sass\n```\n\n\nUsage\n-----\n\nIn your Rack application, setup Sprockets as you normally would, and require \"sprockets-sass\":\n\n``` ruby\nrequire \"sprockets\"\nrequire \"sprockets-sass\"\nrequire \"sass\"\n\nmap \"/assets\" do\n  environment = Sprockets::Environment.new\n  environment.append_path \"assets/stylesheets\"\n  run environment\nend\n\nmap \"/\" do\n  run YourRackApp\nend\n```\n\nSprockets Sass provides also a compressor for ```.css``` files\n\nYou can use it with Sprockets 2.x by doing this:\n\n```ruby\n  environment = Sprockets::Environment.new\n  environment.css_compressor = Sprockets::Sass::V2::Compressor\n```\n\nOr with Sprockets 3.x by doing this:\n\n```ruby\n  environment = Sprockets::Environment.new\n  environment.css_compressor = :sprockets_sass\n```\n\nOr with Rails by setting ```css_compressor``` in the ```config/application.rb``` file to one of the values listed above depending on your version of Sprockets\n\nNow `@import` works essentially just like a `require` directive, but with one essential bonus:\nSass mixins, variables, etc. work as expected.\n\nGiven the following Sass _partials_:\n\n``` scss\n// assets/stylesheets/_mixins.scss\n@mixin border-radius($radius) {\n  -webkit-border-radius: $radius;\n  -moz-border-radius: $radius;\n  border-radius: $radius;\n}\n```\n\n``` scss\n// assets/stylesheets/_settings.scss\n$color: red;\n```\n\nIn another file - you can now do this - from within a Sprockets asset:\n\n``` scss\n// assets/stylesheets/application.css.scss\n@import \"mixins\";\n@import \"settings\";\n\nbutton {\n  @include border-radius(5px);\n  color: $color;\n}\n```\n\nAnd `GET /assets/application.css` would return something like:\n\n``` css\nbutton {\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n  color: red; }\n```\n\nPassing Options to the Sass Engine\n----------------------------------\n\nIf you would like to configure any of the Sass options, you can do so like this:\n\n```ruby\nSprockets::Sass.options[:line_comments] = true\n```\n\nCompass Integration\n-------------------\n\nAs of version 0.3.0, Compass is automatically detected and integrated. All you have to do\nis configure Compass like you normally would:\n\n``` ruby\nrequire \"sprockets\"\nrequire \"sprockets-sass\"\nrequire \"sass\"\nrequire \"compass\"\n\nCompass.configuration do |compass|\n  # ...\nend\n\nmap \"/assets\" do\n  environment = Sprockets::Environment.new\n  environment.append_path \"assets/stylesheets\"\n  run environment\nend\n\n# etc...\n```\n\nThe load paths and other options from Compass are automatically used:\n\n``` scss\n// assets/stylesheets/application.css.scss\n@import \"compass/css3\";\n\nbutton {\n  @include border-radius(5px);\n}\n```\n\n\nAsset Path Sass Functions\n-------------------------\n\nAs of version 0.4.0, asset path helpers have been added. In order to use them you must add [sprockets-helpers](https://github.com/petebrowne/sprockets-helpers) to your Gemfile:\n\n``` ruby\ngem \"sprockets-sass\",    \"~\u003e 0.5\"\ngem \"sprockets-helpers\", \"~\u003e 0.2\"\n# etc...\n```\n\nHere's a quick guide to setting up sprockets-helpers in your application (look at the project's [README](https://github.com/petebrowne/sprockets-helpers/blob/master/README.md) for more information):\n\n``` ruby\nrequire \"sprockets\"\nrequire \"sprockets-sass\"\nrequire \"sprockets-helpers\"\nrequire \"sass\"\n\nmap \"/assets\" do\n  environment = Sprockets::Environment.new\n  environment.append_path \"assets/stylesheets\"\n\n  Sprockets::Helpers.configure do |config|\n    config.environment = environment\n    config.prefix      = \"/assets\"\n    config.digest      = false\n  end\n\n  run environment\nend\n\n# etc...\n```\n\nThe Sass functions are based on the ones in sass-rails. So there is a `-path` and `-url` version of each helper:\n\n``` scss\nbackground: url(asset-path(\"logo.jpg\")); // background: url(\"/assets/logo.jpg\");\nbackground: asset-url(\"logo.jpg\");       // background: url(\"/assets/logo.jpg\");\n```\n\nThe API of the functions mimics the helpers provided by sprockets-helpers, using Sass keyword arguments as options:\n\n``` scss\nbackground: asset-url(\"logo.jpg\", $digest: true);               // background: url(\"/assets/logo-27a8f1f96afd8d4c67a59eb9447f45bd.jpg\");\nbackground: asset-url(\"logo\", $prefix: \"/themes\", $ext: \"jpg\"); // background: url(\"/themes/logo.jpg\");\n```\n\nAs of version 0.6.0, `#asset_data_uri` has been added, which creates a data URI for the given asset:\n\n``` scss\nbackground: asset-data-uri(\"image.jpg\"); // background: url(data:image/jpeg;base64,...);\n```\n\n\nDevelopment\n-----------\n\nInstall dependencies using bundler:\n\n``` bash\nbundle install\n```\n\nsprocket-sass is tested against numerous versions of Sass, Compoass, and Sprockets using [appraisal](https://github.com/thoughtbot/appraisal).\nThis will install all the gems and run the tests against all versions\nRun tests:\n\n``` bash\nbundle exec rake\n```\n\nCopyright\n---------\n\nCopyright (c) 2011 [Peter Browne](http://petebrowne.com). See LICENSE for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetebrowne%2Fsprockets-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetebrowne%2Fsprockets-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetebrowne%2Fsprockets-sass/lists"}