{"id":13556095,"url":"https://github.com/tj/styl","last_synced_at":"2025-04-04T09:09:31.914Z","repository":{"id":54558295,"uuid":"9994581","full_name":"tj/styl","owner":"tj","description":"Flexible and fast modular CSS preprocessor built on top of Rework","archived":false,"fork":false,"pushed_at":"2015-04-10T19:12:28.000Z","size":405,"stargazers_count":530,"open_issues_count":14,"forks_count":21,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-28T08:08:01.738Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tj.png","metadata":{"files":{"readme":"Readme.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-11T03:39:38.000Z","updated_at":"2024-10-20T05:15:59.000Z","dependencies_parsed_at":"2022-08-13T19:40:17.345Z","dependency_job_id":null,"html_url":"https://github.com/tj/styl","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tj%2Fstyl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tj%2Fstyl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tj%2Fstyl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tj%2Fstyl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tj","download_url":"https://codeload.github.com/tj/styl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149502,"owners_count":20891954,"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-01T12:03:37.396Z","updated_at":"2025-04-04T09:09:31.887Z","avatar_url":"https://github.com/tj.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"# Styl\n\n  Work-in-progress CSS preprocessor.\n  Spiritual successor of [Stylus](https://github.com/LearnBoost/stylus).\n  Built on top of [Rework](https://github.com/visionmedia/rework).\n\n  Styl is basically an opinionated configuration of Rework. It does not aim for feature parity with Stylus.\n\n  If your application benefits from a runtime (conditionals, loops etc.), then Stylus is for you.\n  If your application benefits from incredibly fast builds, simplicity, and the most transparent CSS\n  preprocessor around, then Styl is for you.\n\n  Building Styl on top of Rework drastically reduces complexity. That’s because Rework is comprised of multiple\n  smaller pieces, plugins, and has no complex runtime. If you wish to include custom plugins, or configure Styl\n  beyond its defaults, the interface is the same as Rework.\n\n## Installation\n\n```\n$ npm install -g styl\n```\n\nor with component:\n\n```\n$ component install component/styl\n```\n\nor with a script tag using ./styl.js\n\n## Features\n\n  All Rework features and plugins are available out-of-the-box, including:\n\n  - automatic vendor-prefixed properties\n  - automatic vendor-prefixed values\n  - automatic vendor-prefixed keyframes\n  - additional easing functions\n  - transparent support for retina hi-res images\n  - rgba color helpers (`rgba(#fc0, .5)`)\n  - property reference support (`height: @width`)\n  - several [mixins](https://github.com/visionmedia/rework-mixins)\n  - optional whitespace significant syntax\n  - placeholder selectors\n  - selector extensions\n  - parent selector reference\n  - nested selectors\n  - command-line executable\n\n## styl(1)\n\n```\nUsage: styl [options]\n\nOptions:\n\n  -h, --help            output usage information\n  -V, --version         output the version number\n  -v, --vendors \u003clist\u003e  vendor prefixes to apply [o,ms,moz,webkit]\n  -w, --whitespace      use significant whitespace pre-processor\n  -c, --compress        use output compression\n```\n\n## Examples\n\n### CSS syntax\n\n  Regular CSS, with no vendor prefixing:\n\n```css\n#logo {\n  width: 50px;\n  height: @width;\n  absolute: top 100px left 50%;\n  background: linear-gradient(top, black, white);\n}\n```\n\n  Compiled with the following command:\n\n```\n$ styl \u003c simple.css \u003e out.css\n```\n\n  Yields:\n\n```css\n#logo {\n  width: 50px;\n  height: 50px;\n  position: absolute;\n  top: 100px;\n  left: 50%;\n  background: -o-linear-gradient(top, black, white);\n  background: -ms-linear-gradient(top, black, white);\n  background: -moz-linear-gradient(top, black, white);\n  background: -webkit-linear-gradient(top, black, white);\n  background: linear-gradient(top, black, white)\n}\n```\n\n### Whitespace significant syntax\n\n  The SASS-style (significant whitespace) syntax supports nesting and parent selector references.\n  Currently, the CSS style does not; however this is likely to change in the future.\n\n```css\n\nul\n  margin: 0\n  li\n    list-style: none\n    a\n      display: block\n      text-decoration: none\n      padding: 5px 10px\n      \u0026:hover\n        text-decoration: underline\n```\n\n  Compiled with the following command:\n\n```\n$ styl -w \u003c simple.styl \u003e out.css\n```\n\n  Yields:\n\n```css\nul {\n  margin: 0\n}\n\nul li a:hover {\n  text-decoration: underline\n}\n\nul li a {\n  display: block;\n  text-decoration: none;\n  padding: 5px 10px\n}\n\nul li {\n  list-style: none\n}\n```\n\n## API\n\n### Styl(string, options)\n\n  Initialize a new `Styl` with the given `string` of regular CSS or\n  whitespace-significant style CSS with the following options:\n\n  - `whitespace` enable css whitespace [false]\n  - `compress` enable output compression [false]\n\n```js\nvar styl = require('styl');\nvar css = styl('body\\n  color: blue', { whitespace: true }).toString();\n```\n\n### Styl#toString()\n\n  Convert to CSS.\n\n## Projects\n\n  Projects built with Styl:\n\n  - [kube styl](https://github.com/james2doyle/kube-styl) - styl implementation of the \"kube\" css framework\n\n  Build tools implementing Styl:\n  \n  - [grunt-styl](https://github.com/sindresorhus/grunt-styl) by [sindresorhus](https://github.com/sindresorhus)\n  - [gulp-styl](https://github.com/sindresorhus/gulp-styl) by [sindresorhus](https://github.com/sindresorhus)\n\n## License\n\n  MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftj%2Fstyl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftj%2Fstyl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftj%2Fstyl/lists"}