{"id":13687863,"url":"https://github.com/aeosynth/ccss","last_synced_at":"2025-05-01T15:33:25.497Z","repository":{"id":137705285,"uuid":"1319941","full_name":"aeosynth/ccss","owner":"aeosynth","description":"CoffeeScript CSS","archived":true,"fork":false,"pushed_at":"2013-06-22T22:37:44.000Z","size":1262,"stargazers_count":126,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-03T15:06:51.027Z","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/aeosynth.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-02-02T10:38:38.000Z","updated_at":"2024-07-30T22:23:26.000Z","dependencies_parsed_at":"2023-04-17T15:57:07.907Z","dependency_job_id":null,"html_url":"https://github.com/aeosynth/ccss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeosynth%2Fccss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeosynth%2Fccss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeosynth%2Fccss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeosynth%2Fccss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeosynth","download_url":"https://codeload.github.com/aeosynth/ccss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224266371,"owners_count":17283124,"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-02T15:01:02.183Z","updated_at":"2025-05-01T15:33:25.476Z","avatar_url":"https://github.com/aeosynth.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"CoffeeScript CSS\n\ndespite the name, CoffeeScript is not required; it just makes writing objects\n(as well as everything else) easier. You could create a JSON string in another\nlanguage, parse it in node, and render it with ccss.\n\ninstall: `npm install ccss`\n\nmain.coffee:\n\n```coffee\nccss = require 'ccss'\n\ntemplate = require './template.coffee'\ncss = ccss.compile template\nrequire('fs').writeFileSync 'main.css', css\n\n#or all at once: ccss.compileFile './template.coffee', 'main.css'\n```\n\ntemplate.coffee:\n\n```coffee\nborderRadius = (str) -\u003e\n  WebkitBorderRadius: str\n  MozBorderRadius:    str\n  borderRadius:       str\n\nboxShadow = (str) -\u003e\n  WebkitBoxShadow: str\n  MozBoxShadow:    str\n  boxShadow:       str\n\nmodule.exports =\n  form:\n    input:\n      padding: '5px'\n      border: '1px solid'\n      mixins: borderRadius '5px'\n  '#id .className': do -\u003e\n    opaque = 1\n    translucent = opaque / 2\n    img:\n      mixins: [\n        borderRadius '5px'\n        boxShadow '5px'\n      ]\n      opacity: translucent\n    'img:hover':\n      opacity: opaque\n```\n\nmain.css:\n\n```css\nform input {\n  padding: 5px;\n  border: 1px solid;\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n}\n#id .className img {\n  opacity: 0.5;\n  -webkit-border-radius: 5px;\n  -moz-border-radius: 5px;\n  border-radius: 5px;\n  -webkit-box-shadow: 5px;\n  -moz-box-shadow: 5px;\n  box-shadow: 5px;\n}\n#id .className img:hover {\n  opacity: 1;\n}\n```\n\nthe core of the compiler is simply this:\n\niterate over the key / values of an object; if the value is another object,\nappend the key to the current selector, and recurse; else generate css.\n\nto reduce the amount of quoting, if a css property has a capital letter C,\nit will be transformed into -c; selectors are not touched.\n\n# Related\n\n[CoffeeKup](http://coffeekup.org/) - CoffeeScript to HTML\n\n[ckup](http://satyr.github.com/ckup/) - [Coco](http://satyr.github.com/coco/) to both HTML and CSS\n\n[CoffeeStylesheets](https://github.com/mikesmullin/coffee-stylesheets) - Another CoffeeScript to CSS approach\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeosynth%2Fccss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeosynth%2Fccss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeosynth%2Fccss/lists"}