{"id":17584729,"url":"https://github.com/cssmagic/stylus-playground","last_synced_at":"2025-04-28T16:23:56.906Z","repository":{"id":25197975,"uuid":"28621654","full_name":"cssmagic/stylus-playground","owner":"cssmagic","description":"Stylus environment for practice and testing.","archived":false,"fork":false,"pushed_at":"2017-01-17T04:35:21.000Z","size":10,"stargazers_count":16,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T11:11:58.421Z","etag":null,"topics":["autoprefixer","browsersync","css","stylus","stylus-environment"],"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/cssmagic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-30T07:20:07.000Z","updated_at":"2020-10-24T04:45:53.000Z","dependencies_parsed_at":"2022-09-21T01:50:55.901Z","dependency_job_id":null,"html_url":"https://github.com/cssmagic/stylus-playground","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssmagic%2Fstylus-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssmagic%2Fstylus-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssmagic%2Fstylus-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssmagic%2Fstylus-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssmagic","download_url":"https://codeload.github.com/cssmagic/stylus-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251343491,"owners_count":21574372,"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":["autoprefixer","browsersync","css","stylus","stylus-environment"],"created_at":"2024-10-22T02:07:53.699Z","updated_at":"2025-04-28T16:23:56.885Z","avatar_url":"https://github.com/cssmagic.png","language":"JavaScript","readme":"# Stylus-Playground\n\n\u003e Stylus environment for practice and testing.\n\n用于实践和测试 Stylus 的简易开发环境。无需配置，开箱即用！\n\n## 背景\n\nStylus 是一款 CSS 预处理器，与 Sass 和 Less 相比，它更像是一门编程语言，功能强大，语法灵活。同时，Stylus 完全由 JavaScript 实现，对 Node.js 工具链极为友好。\n\n## 功能亮点\n\n* 已配置好 Stylus 语言的编译程序\n* 已内置 Autoprefixer 自动添加浏览器前缀\n* 默认加载 Normalize 和 CSS Reset\n* 修改文件时自动刷新浏览器 😍\n* 编译错误消息直接推送到浏览器 😍\n\n![stylus-playground](https://cloud.githubusercontent.com/assets/1231359/21881255/532f72ac-d8de-11e6-8250-0bb11401dcc8.png)\u003cbr\u003e\u003csup\u003e（工作模式示意：一边编辑源码、一边在浏览器中立即看到效果）\u003c/sup\u003e\n\n![error-report](https://cloud.githubusercontent.com/assets/1231359/22007568/ab7f0822-dcae-11e6-9c1f-8f65357b7176.png)\u003cbr\u003e\u003csup\u003e（错误消息示意：编译错误直接推送到浏览器）\u003c/sup\u003e\n\n## 使用方法\n\n\u003e **注意**：以下使用方法可用，但将来有可能会有变化。建议你在升级之后重新阅读 README。\n\n### 如何上手\n\n0. 把这个 repo 克隆到你本地的工作目录下，安装必要的依赖：\n\n\t```sh\n\t$ git clone https://github.com/cssmagic/stylus-playground.git\n\t$ cd stylus-playground\n\t$ npm install\n\t```\n\n0. 运行以下命令启动服务（请不要关闭终端窗口）：\n\n\t```sh\n\t$ npm start\n\t```\n\n\t此时你的默认浏览器会自动打开 `index.html` 页面。\n\n0. 编辑 `src/index.html` 和 `src/css/index.styl` 文件，每次保存时浏览器都会自动更新，无需手动刷新。\n\n\t\u003e **注意**：强烈建议你新开一个开发分支，随便折腾无压力。\n\n0. 如果需要终止服务，在终端窗口按 `Ctrl + C` 即可。\n\n### 如何升级\n\n\u003e **注意**：在升级之前需要先终止服务。升级后请再次启动服务。\n\n* 如果你写的代码没有保留价值，直接删掉 `stylus-playground` 目录，然后重新走一遍上述 “如何上手” 步骤。\n\t\n* 如果想保留你在开发分支上写的代码，则可以先切回 `master` 分支，拉取最新代码，然后 rebase 你的开发分支即可。\n\n## 鸣谢\n\n* [Gulp 4](https://github.com/gulpjs/gulp/tree/4.0)：任务调度。\n* [gulp-stylus](https://github.com/stevelacy/gulp-stylus)：Stylus 编译。\n* [BrowserSync](https://www.browsersync.io/)：浏览器自动刷新服务。\n* [Normalize.css](https://github.com/necolas/normalize.css)：消灭各大浏览器默认样式的缺陷和差异。\n* [Zero](https://github.com/CMUI/zero)：CSS reset。\n* [Autoprefixer](https://github.com/postcss/autoprefixer)：为 CSS 代码添加浏览器前缀。\n\n***\n\n## License\n\n[MIT License](http://www.opensource.org/licenses/mit-license.php)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssmagic%2Fstylus-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssmagic%2Fstylus-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssmagic%2Fstylus-playground/lists"}