{"id":15011489,"url":"https://github.com/css-george/less-plugin-css-george","last_synced_at":"2025-04-09T19:10:56.503Z","repository":{"id":15616786,"uuid":"78498078","full_name":"css-george/less-plugin-css-george","owner":"css-george","description":"A plugin for Less to allow runtime manipulation of variables.","archived":false,"fork":false,"pushed_at":"2025-04-08T00:10:17.000Z","size":695,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T19:10:45.273Z","etag":null,"topics":["css-variables","hacktoberfest","less","lesscss"],"latest_commit_sha":null,"homepage":"https://css-george.github.io","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/css-george.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2017-01-10T04:38:41.000Z","updated_at":"2025-04-08T00:10:19.000Z","dependencies_parsed_at":"2024-02-26T23:46:15.022Z","dependency_job_id":"285ca6b8-d5aa-4f2a-af4d-9fe15aac9f72","html_url":"https://github.com/css-george/less-plugin-css-george","commit_stats":{"total_commits":85,"total_committers":4,"mean_commits":21.25,"dds":"0.23529411764705888","last_synced_commit":"9a6e729aeaaf5d48f4cfb2497dd1bf51ad077690"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-george%2Fless-plugin-css-george","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-george%2Fless-plugin-css-george/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-george%2Fless-plugin-css-george/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css-george%2Fless-plugin-css-george/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/css-george","download_url":"https://codeload.github.com/css-george/less-plugin-css-george/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094992,"owners_count":21046770,"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":["css-variables","hacktoberfest","less","lesscss"],"created_at":"2024-09-24T19:41:09.358Z","updated_at":"2025-04-09T19:10:56.480Z","avatar_url":"https://github.com/css-george.png","language":"JavaScript","readme":"less-plugin-css-george\n======================\n\nA plugin for [Less](http://lesscss.org/) to allow runtime manipulation of\nvariables.\n\nThis plugin will replace Less variables with native CSS variables, and annotate\nthe resulting CSS file so that the values can be edited at runtime using the\nCSS George editor.  This is intended as a tool for designers working with\ntheming systems to experiment with colour palettes at a variable level, which\nis often more broad than individual style rules as edited in the browser\ndeveloper tools.\n\nThis plugin should **not be used in production CSS** since browser support for\nCSS variables is not yet widespread, and it currently provides **no fallback**.\nPlease read the Known Limitations below.\n\n\nInstallation\n------------\n\nInstallation is easy via npm:\n\n```\nnpm install --save-dev less-plugin-css-george\n```\n\nUsage\n-----\n\n### Marking variables for export\n\nIn your .less files, you can add special comments to flag Less variables to be\nexported as runtime-editable CSS variables.  The special comment syntax is the\nword `@export` preceeding the variable declaration.\n\nThere are a few valid ways of adding the comment, as shown below:\n\n```less\n/* @export */ @header-bg: #ffffff;\n\n// @export\n@navbar-text: #333333;\n\n/*@export*/ @navbar-height: 56px;\n```\n\n\n### Compiling with Exported Variables\n\nOnce you've installed the css-george plugin, you can simply add `--css-george`\nto your `lessc` command and it will generate an output .css file with the\nexported variables defined as CSS variables.\n\nExample:\n\n```\nlessc --css-george ./src/less/main.less ./www/css/style.css\n```\n\nIn Less 3, you can also load the plugin with the `@plugin` directive in your\nless file:\n\n```\n@plugin 'css-george';\n```\n\n\n### Compiling with Hardcoded Fallback values\n\nFor browsers that don't support native CSS variables, you can tell the\ncss-george plugin to export a property twice: once with the original value\nhardcoded, and again with the custom property. Be aware that this may cause\nsourcemaps to become inaccurate.\n\n```\nlessc --css-george=\"fallback=true\" ./src/less/main.less ./www/css/style.css\n```\n\nIn Less 3, you can also specify this via the `@plugin` directive:\n\n```\n@plugin (fallback=true) 'css-george';\n```\n\n\nKnown Limitations\n-----------------\n\n* Because the Less variables are replaced at compile-time with CSS expressions,\n  Less functions that expect colour values will fail.  In particular, functions\n  like `darken`, `lighten`, and `fade` are incompatible with native CSS\n  variables.\n\n* For similar reasons, the native math support in Less will be unable to\n  perform compile-time calculations with native CSS variables. As a workaround,\n  you can use the CSS `calc()` feature.\n\n* CSS variable support is only in bleeding edge browsers right now:  \n  * Chrome 49+\n  * Firefox 31+\n  * Safari 9.1+\n  * Edge 15+\n  * iOS 9.3+\n  * Android 5.0+\n\n* Colours must be defined in hexadecimal notation for the colour picker widget\n  in the CSS George editor to work.  Non hexadecimal colours will be editable\n  via a text input.\n\n\nContributing\n------------\n\nContributions of bug reports, feature requests, and pull requests are greatly\nappreciated!\n\nPlease note that this project is released with a [Contributor Code of\nConduct](https://github.com/css-george/less-plugin-css-george/blob/master/CODE_OF_CONDUCT.md).\nBy participating in this project you agree to abide by its terms.\n\n\nLicence\n-------\n\nCopyright © 2017 Darryl Pogue\nLicensed under the MIT Licence.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss-george%2Fless-plugin-css-george","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcss-george%2Fless-plugin-css-george","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss-george%2Fless-plugin-css-george/lists"}