{"id":13527081,"url":"https://github.com/postcss/sugarss","last_synced_at":"2025-04-23T20:56:11.547Z","repository":{"id":41394788,"uuid":"49004761","full_name":"postcss/sugarss","owner":"postcss","description":"Indent-based CSS syntax for PostCSS","archived":false,"fork":false,"pushed_at":"2024-07-18T14:18:46.000Z","size":1057,"stargazers_count":711,"open_issues_count":1,"forks_count":39,"subscribers_count":24,"default_branch":"main","last_synced_at":"2024-10-29T15:14:09.133Z","etag":null,"topics":[],"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/postcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"open_collective":"postcss","github":"ai"}},"created_at":"2016-01-04T15:15:27.000Z","updated_at":"2024-10-16T17:31:39.000Z","dependencies_parsed_at":"2024-01-13T18:46:29.279Z","dependency_job_id":"539f7ee7-9fc2-425d-b062-11864d3a539a","html_url":"https://github.com/postcss/sugarss","commit_stats":{"total_commits":199,"total_committers":19,"mean_commits":"10.473684210526315","dds":"0.20100502512562812","last_synced_commit":"f880b772ee45d4def8d7b7555272a533e0dfc524"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fsugarss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fsugarss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fsugarss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fsugarss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/sugarss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666030,"owners_count":20975794,"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":[],"created_at":"2024-08-01T06:01:40.570Z","updated_at":"2025-04-09T02:16:22.091Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# SugarSS\n\n\u003cimg align=\"right\" width=\"120\" height=\"155\"\n     title=\"SugarSS logo by Maria Keller\"\n     src=\"http://postcss.github.io/sugarss/logo.svg\"\u003e\n\nIndent-based CSS syntax for [PostCSS].\n\n```sass\na\n  color: blue\n\n.multiline,\n.selector\n  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),\n              1px 0 3px rgba(0, 0, 0, .6)\n\n// Mobile\n@media (max-width: 400px)\n  .body\n    padding: 0 10px\n```\n\nAs any PostCSS custom syntax, SugarSS has source map, [stylelint]\nand [postcss-sorting] support out-of-box.\n\nIt was designed to be used with [postcss-simple-vars] and [postcss-nested].\nBut you can use it with any PostCSS plugins\nor use it without any PostCSS plugins.\nWith [postcss-mixins] you can use `@mixin` syntax as in Sass.\n\n\u003ca href=\"https://evilmartians.com/?utm_source=sugarss\"\u003e\n  \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n       alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n[postcss-mixins]:              https://github.com/postcss/postcss-mixins\n[postcss-nested]:              https://github.com/postcss/postcss-nested\n[postcss-simple-vars]:         https://github.com/postcss/postcss-simple-vars\n[postcss-sorting]:             https://github.com/hudochenkov/postcss-sorting\n[stylelint]:                   http://stylelint.io/\n[PostCSS]:                     https://github.com/postcss/postcss\n\n\n## Syntax\n\nSugarSS MIME-type is `text/x-sugarss` with `.sss` file extension.\n\n\n### Indent\n\nWe recommend 2 spaces indent. However, SugarSS autodetects indent\nand can be used with tabs or spaces.\n\nBut it is prohibited to mix spaces and tabs in SugarSS sources.\n\n\n### Multiline\n\nSugarSS was designed to have intuitively multiline selectors and declaration\nvalues.\n\nThere are 3 rules for any types of nodes:\n\n```sass\n// 1. New line inside brackets will be ignored\n@supports ( (display: flex) and\n            (display: grid) )\n\n// 2. Comma at the end of the line\n@media (max-width: 400px),\n       (max-height: 800px)\n\n// 3. Backslash before new line\n@media screen and \\\n       (min-width: 600px)\n```\n\nIn a selector you can put a new line anywhere. Just keep same indent\nfor every line of selector:\n\n```sass\n.parent \u003e\n.child\n  color: black\n```\n\nIn a declaration value you can put a new line anywhere. Just keep a bigger indent\nfor the value:\n\n```sass\n.one\n  background: linear-gradient(rgba(0, 0, 0, 0), black)\n              linear-gradient(red, rgba(255, 0, 0, 0))\n\n.two\n  background:\n    linear-gradient(rgba(0, 0, 0, 0), black)\n    linear-gradient(red, rgba(255, 0, 0, 0))\n```\n\n\n### Comments\n\nSugarSS supports two types of comments:\n\n```sass\n/*\n Multiline comments\n */\n\n// Inline comments\n```\n\nThere is no “silent” comment in SugarSS. Output CSS will contain all comments\nfrom `.sss` source. But you can use [postcss-discard-comments]\nfor Sass’s silent/loud comments behaviour.\n\n[postcss-discard-comments]: https://www.npmjs.com/package/postcss-discard-comments\n\n\n### Rule and Declarations\n\nSugarSS separates selectors and declarations by `:\\s` or `:\\n` token.\n\nSo you must write a space after the property name: `color: black` is good,\n`color:black` is prohibited.\n\n\n### Other\n\nSugarSS is just a syntax, it change the way how you write CSS,\nbut do not add preprocessor features build-in.\n\nHere are PostCSS plugins which could add you preprocessor features:\n\n* **[postcss-simple-vars]** adds variables.\n* **[postcss-nested]** adds nested rules.\n* **[postcss-import]** adds `@import` directive support.\n* **[postcss-import-ext-glob]** extends [postcss-import] path resolver to allow glob usage as a path.\n* **[postcss-mixins]** add `@mixin` support.\n* **[postcss-functions]** allows you to define own CSS functions in JS.\n\n[postcss-functions]: https://github.com/andyjansson/postcss-functions\n[postcss-mixins]: https://github.com/postcss/postcss-mixins\n[postcss-import-ext-glob]: https://github.com/dimitrinicolas/postcss-import-ext-glob\n[postcss-import]:          https://github.com/postcss/postcss-import\n[postcss-nested]:          https://github.com/postcss/postcss-nested\n[postcss-simple-vars]:     https://github.com/postcss/postcss-simple-vars\n\n\n## Text Editors\n\n* SublimeText: [Syntax Highlighting for .SSS SugarSS]\n* Atom: [language-postcss], [source-preview-postcss] and [build-sugarss]\n* Vim: [vim-sugarss]\n* VSCode: [vetur](https://vuejs.github.io/vetur/), and [postcss-sugarss-language](https://github.com/MhMadHamster/vscode-postcss-language)\n\nWe are working on syntax highlight support in text editors.\n\nRight now, you can set `Sass` or `Stylus` syntax highlight for `.sss` files.\n\n[Syntax Highlighting for .SSS SugarSS]: https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20SSS%20SugarSS\n[source-preview-postcss]:          https://atom.io/packages/source-preview-postcss\n[language-postcss]:                https://atom.io/packages/language-postcss\n[build-sugarss]:                   https://atom.io/packages/build-sugarss\n[vim-sugarss]:                     https://github.com/hhsnopek/vim-sugarss\n\n\n## Usage\n\nSugarSS needs PostCSS compiler. Install [`postcss-loader`] for webpack,\n[`gulp-postcss`] for Gulp, [`postcss-cli`] for npm scripts.\n[Parcel] has build-in support for PostCSS.\n\nThen install SugarSS: `npm install --save-dev postcss sugarss` if you use npm\nand `yarn add --dev postcss sugarss` if you use Yarn.\n\nThen create `.postcssrc` file:\n\n```json\n{\n  \"parser\": \"sugarss\",\n  \"plugins\": {\n    \"postcss-simple-vars\": {}\n  }\n}\n```\n\n[`postcss-loader`]: https://github.com/postcss/postcss-loader\n[`gulp-postcss`]: https://github.com/postcss/gulp-postcss\n[`postcss-cli`]: https://github.com/postcss/postcss-cli\n[Parcel]: https://parceljs.org/transforms.html\n\n\n### Imports\n\nIf you doesn’t use Webpack or Parcel, you need some PostCSS plugin\nto process `@import` directives.\n\nIf you want `@import`, install [postcss-import] and add it to `.postcssrc` file:\n\n```diff js\n{\n  \"parser\": \"sugarss\",\n  \"plugins\": {\n+   \"postcss-import\": {},\n    \"postcss-simple-vars\": {}\n  }\n}\n```\n\n[postcss-import]:      https://github.com/postcss/postcss-import\n\n\n### Mixins\n\nFor mixins support, install [postcss-mixins] and add it to `.postcssrc` file:\n\n```diff js\n{\n  \"parser\": \"sugarss\",\n  \"plugins\": {\n+   \"postcss-mixins\": {\n+     \"mixinsDir\": \"./mixins\"\n+   },\n    \"postcss-simple-vars\": {}\n  }\n}\n```\n\nNow you can define your mixins in `mixins/` dir.\nFor example create `mixins/circle.sss` with:\n\n```sss\n@define-mixin circle $size\n  border-radius: 50%\n  width: $size\n  height: $size\n```\n\n\n### Functions\n\nTo define custom functions you need to install [postcss-functions]\nand add it to `.postcssrc` file:\n\n```diff js\n{\n  \"parser\": \"sugarss\",\n  \"plugins\": {\n+   \"postcss-functions\": {\n+     \"glob\": \"./functions\"\n+   },\n    \"postcss-simple-vars\": {}\n  }\n}\n```\n\nThen you can define functions in `functions/` dir. For example,\n`functions/foo.js` will define `foo()` function in CSS:\n\n```js\nmodule.exports = function (args) {\n  return 'foo'\n}\n```\n\n\n### SugarSS to SugarSS\n\nSometimes we use PostCSS not to build CSS, but to fix source files.\nFor example, to sort properties by [postcss-sorting].\n\nFor this cases use the `syntax` option, instead of `parser`:\n\n```js\ngulp.task('sort', function () {\n    return gulp.src('src/**/*.sss')\n        .pipe(postcss([sorting], { syntax: sugarss }))\n        .pipe(gulp.dest('src'));\n});\n```\n\n[postcss-sorting]: https://github.com/hudochenkov/postcss-sorting\n\n\n### CSS to SugarSS\n\nYou can even compile existing CSS sources to SugarSS syntax.\nJust use `stringifier` option instead of `parser`:\n\n```js\npostcss().process(css, { stringifier: sugarss }).then(function (result) {\n    result.content // Converted SugarSS content\n});\n```\n\n\n## Thanks\n\nCute project logo was made by [Maria Keller](http://www.mariakellerac.com/).\n","funding_links":["https://opencollective.com/postcss","https://github.com/sponsors/ai"],"categories":["JavaScript","CSS3"],"sub_categories":["PostCSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fsugarss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fsugarss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fsugarss/lists"}