{"action":"created","issue":{"url":"https://api.github.com/repos/Compass/compass/issues/1969","labels_url":"https://api.github.com/repos/Compass/compass/issues/1969/labels{/name}","comments_url":"https://api.github.com/repos/Compass/compass/issues/1969/comments","events_url":"https://api.github.com/repos/Compass/compass/issues/1969/events","html_url":"https://github.com/Compass/compass/issues/1969","id":72811335,"number":1969,"title":"Optimize sprite css output","user":{"login":"Landish","id":534610,"avatar_url":"https://avatars.githubusercontent.com/u/534610?v=3","gravatar_id":"","url":"https://api.github.com/users/Landish","html_url":"https://github.com/Landish","followers_url":"https://api.github.com/users/Landish/followers","following_url":"https://api.github.com/users/Landish/following{/other_user}","gists_url":"https://api.github.com/users/Landish/gists{/gist_id}","starred_url":"https://api.github.com/users/Landish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Landish/subscriptions","organizations_url":"https://api.github.com/users/Landish/orgs","repos_url":"https://api.github.com/users/Landish/repos","events_url":"https://api.github.com/users/Landish/events{/privacy}","received_events_url":"https://api.github.com/users/Landish/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-05-03T14:15:30Z","updated_at":"2015-05-05T13:12:45Z","closed_at":"2015-05-05T13:12:45Z","body":"Hello,\r\n\r\nI have a suggestion to optimize CSS output of sprite generated files.\r\n\r\nConsider the following scenario.\r\nIn our `/images/icon/` directory we have a bunch of `.png` files/icons. \r\nAnd we have `_icons.scss` file, contains the following code:\r\n```sass\r\n$icon-sprite-dimensions: true;\r\n$icon-layout: smart;\r\n$icon-sprite-base-class: '.icon';\r\n@import \"icon/*.png\";\r\n@include all-icon-sprites;\r\n\r\n.icon {\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n}\r\n\r\n```\r\n\r\nIf we compile this compass file, the css output will be something like this:\r\n```css\r\n.icon, .icon-cart, .icon-home {\r\n  background-image: url('../images/icon-s0a7bc27549.png');\r\n  background-repeat: no-repeat;\r\n}\r\n```\r\n\r\nAnd the list of CSS class names/selectors of icons will increase every time, when new icon is added.\r\nIt would be so much better, if it could render the \"starts with\" or \"contains\" css syntax:\r\n\r\n\"Starts with\"\r\n```css\r\n[class^=\"icon-\"] {\r\n  background-image: url('../images/icon-s0a7bc27549.png');\r\n  background-repeat: no-repeat;\r\n}\r\n```\r\n\"Contains\" \r\n```css\r\n[class*=\"icon-\"] {\r\n  background-image: url('../images/icon-s0a7bc27549.png');\r\n  background-repeat: no-repeat;\r\n}\r\n```\r\nThis kind of syntax is supported in every major browser, including IE7 and above: http://caniuse.com/#feat=css-sel3\r\n\r\nI, personally don't know Ruby, otherwise I would send a pull request.  \r\nPlease, anyone, if you think that, this is a better way and knows how to improve it, make a change, send a pull request.\r\n\r\nThanks!\r\n"},"comment":{"url":"https://api.github.com/repos/Compass/compass/issues/comments/99074507","html_url":"https://github.com/Compass/compass/issues/1969#issuecomment-99074507","issue_url":"https://api.github.com/repos/Compass/compass/issues/1969","id":99074507,"user":{"login":"Landish","id":534610,"avatar_url":"https://avatars.githubusercontent.com/u/534610?v=3","gravatar_id":"","url":"https://api.github.com/users/Landish","html_url":"https://github.com/Landish","followers_url":"https://api.github.com/users/Landish/followers","following_url":"https://api.github.com/users/Landish/following{/other_user}","gists_url":"https://api.github.com/users/Landish/gists{/gist_id}","starred_url":"https://api.github.com/users/Landish/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Landish/subscriptions","organizations_url":"https://api.github.com/users/Landish/orgs","repos_url":"https://api.github.com/users/Landish/repos","events_url":"https://api.github.com/users/Landish/events{/privacy}","received_events_url":"https://api.github.com/users/Landish/received_events","type":"User","site_admin":false},"created_at":"2015-05-05T13:12:45Z","updated_at":"2015-05-05T13:12:45Z","body":"After not getting answer for a while, I decided to make a \"custom\" mixin for solving this issue.\r\nhttps://github.com/Landish/compass-sprites"}}