{"id":14985584,"url":"https://github.com/neon-x-hub/yaml-css","last_synced_at":"2026-02-18T08:32:25.502Z","repository":{"id":245332070,"uuid":"817923790","full_name":"neon-x-hub/yaml-css","owner":"neon-x-hub","description":"Explore our YamlCSS Framework—a straightforward tool for web styling using YAML syntax. Convert configurations into SCSS effortlessly, managing variables, mixins, and styling with ease. Ideal for defining colors, typography, and layouts, this framework enhances productivity and maintainability, leveraging your existing SASS/CSS knowledge.","archived":false,"fork":false,"pushed_at":"2025-05-03T05:34:42.000Z","size":346,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T07:19:51.378Z","etag":null,"topics":["cli","converter","css","css-cli","css-framework","scss","scss-framework","scss-mixins","scss-variables","yaml","yaml-files"],"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/neon-x-hub.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-20T18:15:20.000Z","updated_at":"2025-08-13T12:50:36.000Z","dependencies_parsed_at":"2024-06-23T02:44:17.029Z","dependency_job_id":"08744219-6170-4389-9a46-202e740bedb0","html_url":"https://github.com/neon-x-hub/yaml-css","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":"0.41666666666666663","last_synced_commit":"e66bf35f8d9fdd545cfa2c6aff2ff062f8e7d1cd"},"previous_names":["neon-x-hub/yaml-to-css","neon-x-hub/yaml-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/neon-x-hub/yaml-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neon-x-hub%2Fyaml-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neon-x-hub%2Fyaml-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neon-x-hub%2Fyaml-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neon-x-hub%2Fyaml-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neon-x-hub","download_url":"https://codeload.github.com/neon-x-hub/yaml-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neon-x-hub%2Fyaml-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29574019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T08:21:05.678Z","status":"ssl_error","status_checked_at":"2026-02-18T08:18:53.770Z","response_time":162,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["cli","converter","css","css-cli","css-framework","scss","scss-framework","scss-mixins","scss-variables","yaml","yaml-files"],"created_at":"2024-09-24T14:11:14.821Z","updated_at":"2026-02-18T08:32:25.486Z","avatar_url":"https://github.com/neon-x-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## YamlCSS Converter\r\n\r\n![Header Image](images/header.jpg)\r\n\r\n\r\nWelcome to our YamlCSS Framework, a user-friendly tool designed to simplify web styling without requiring extensive new learning. Leveraging familiar SASS/CSS knowledge, this framework enables seamless translation of YAML configurations into robust CSS/SCSS, facilitating efficient management of variables, mixins, and styling across projects. Whether configuring colors, typography, or complex layouts, our framework empowers developers to enhance productivity and maintainability with minimal effort and maximum impact.\r\n\r\n**Features:**\r\n\r\n* Parses YAML files using the `js-yaml` library.\r\n* Converts the parsed YAML data to CSS styles based on a predefined structure.\r\n* Offers a command-line tool for easy conversion.\r\n* Offers an out-of-the-box SCSS support for nested styling /Mixins/Variables/Functions/Inheritance/Loops/Conditions .\r\n\r\n**Installation:**\r\n\r\n1. Clone this repository or download the zip file.\r\nOr Install globally via a package manager:\r\n\r\n   ```bash\r\n   npm install -g https://github.com/neon-x-hub/yaml-css.git\r\n   ```\r\n\r\n**Usage:**\r\n\r\n1. **Create a YAML file:** Define your styles in a YAML file (e.g., `styles.yaml`). Refer to the example structure below.\r\n2. **Run the script:** Execute the script using the command line:\r\n\r\n   ```bash\r\n   ycss input.yaml output.scss\r\n   ```\r\n\r\n   - Replace `input.yaml` with your actual file name.\r\n   - Replace `output.scss` with your desired output file name for the generated CSS/SCSS.\r\n\r\n### Feature with some examples\r\n\r\n### Note:\r\nIf any key or value strings in the YAML configuration contain special characters, ensure they are wrapped in double quotes (`\"`). This helps maintain correct interpretation and processing when translating into SCSS.\r\n\r\n### 1. Variables\r\n\r\n**YAML:**\r\n```yaml\r\nvariables:\r\n  primary-color: '#3498db'\r\n  padding: '10px'\r\n  font-sizes: [10px, 20px, 30px]\r\n  theme-colors:\r\n    primary: '#3498db'\r\n    secondary: '#2ecc71'\r\n    danger: '#e74c3c'\r\n  colors:\r\n    - red\r\n    - green\r\n    - blue\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n$primary-color: #3498db;\r\n$padding: 10px;\r\n$font-sizes: (10px, 20px, 30px);\r\n$theme-colors: (primary: #3498db, secondary: #2ecc71, danger: #e74c3c);\r\n$colors: (red, green, blue);\r\n```\r\n\r\n### 2. Mixins\r\n\r\n**YAML:**\r\n```yaml\r\n# You can define a set of mixins\r\nmixins:\r\n  box:\r\n    padding: $padding\r\n    border: 1px solid $primary-color\r\n  chip:\r\n    padding: $padding\r\n    border-radius: 9999px\r\n# Or you can define each mixin individually with the \"mxn\" keyword\r\nmxn box2:\r\n  padding: $padding\r\n  border: 1px solid $primaryColor\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n@mixin box {\r\n  padding: $padding;\r\n  border: 1px solid $primary-color;\r\n}\r\n@mixin chip {\r\n  padding: $padding;\r\n  border-radius: 9999px;\r\n}\r\n@mixin box2 {\r\n  padding: $padding;\r\n  border: 1px solid $primaryColor;\r\n}\r\n```\r\n\r\n### 3. Functions\r\n\r\n**YAML:**\r\n```yaml\r\n# You can define a set of functions\r\nfunctions:\r\n  darken:\r\n    - [color, amount] # Params\r\n    - | # Body\r\n       @return mix(black, $color, $amount);\r\n\r\n# Or you can define each function individually with \"func\" keyword\r\nfunc lighten:\r\n  - [color, amount]\r\n  - |\r\n     @return mix(white, $color, $amount);\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n@function darken ($color, $amount) {\r\n  @return mix(black, $color, $amount);\r\n  \r\n}\r\n@function lighten($color, $amount) {\r\n  @return mix(white, $color, $amount);\r\n  \r\n}\r\n\r\n```\r\n\r\n### 4. Styles By Tag, Classes and IDs\r\n\r\n**YAML:**\r\n```yaml\r\nh1:\r\n  font-size: 24px\r\n  font-weight: bold\r\n  color: green\r\n  \"\u0026:hover\":\r\n    color: blue\r\n\r\n.class :\r\n  color: red\r\n  font-size: 16px\r\n  font-weight: bold\r\n  text-decoration: underline\r\n  \"\u0026:before\" :\r\n    color: blue\r\n\r\n\"#id\":\r\n  color: blue\r\n  font-weight: bold\r\n  text-decoration: none\r\n  \"\u0026:hover\":\r\n    text-decoration: underline\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\nh1 {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: green;\r\n  \u0026:hover {\r\n    color: blue;\r\n  }\r\n}\r\n.class {\r\n  color: red;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n  \u0026:before {\r\n    color: blue;\r\n  }\r\n}\r\n#id {\r\n  color: blue;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  \u0026:hover {\r\n    text-decoration: underline;\r\n  }\r\n}\r\n```\r\n\r\n**CSS:**\r\n```css\r\nh1 {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: green;\r\n}\r\nh1:hover {\r\n  color: blue;\r\n}\r\n\r\n.class {\r\n  color: red;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  text-decoration: underline;\r\n}\r\n.class:before {\r\n  color: blue;\r\n}\r\n\r\n#id {\r\n  color: blue;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n}\r\n#id:hover {\r\n  text-decoration: underline;\r\n}\r\n```\r\n\r\n### 5. Support for CSS @ Rules (e.g. @supports, @media ...etc)\r\nSupported tags are 'media', 'font-face', 'keyframes', 'supports', 'document', 'page', 'namespace'\r\n\r\n**YAML:**\r\n```yaml\r\nsupports (display:grid):\r\n  .grid-container:\r\n    display: grid\r\n```\r\n\r\n**CSS/SCSS:**\r\n```scss\r\n@supports (display: grid) {\r\n  .grid-container {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n### 6. The @use Sass rule\r\n**YAML:**\r\n```yaml\r\nuse:\r\n  - sass:map\r\n  - m: sass:math\r\n```\r\n\r\n**SCSS**\r\n```scss\r\n@use 'sass:map';\r\n@use 'sass:math' as m;\r\n```\r\n\r\n### 7. Nested Selector with Mixin (nav ul li a)\r\n\r\n**YAML:**\r\n```yaml\r\nnav:\r\n  ul:\r\n    margin: 0\r\n    padding: 0\r\n    list-style: none\r\n    li:\r\n      display: inline-block\r\n      include: chip\r\n      a:\r\n        text-decoration: none\r\n        color: $primary-color\r\n        include: box\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\nnav {\r\n  ul {\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n    li {\r\n      display: inline-block;\r\n      @include chip;\r\n      a {\r\n        text-decoration: none;\r\n        color: $primary-color;\r\n        @include box;\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n**CSS:**\r\n``` css\r\nnav ul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\nnav ul li {\r\n  display: inline-block;\r\n  padding: 10px;\r\n  border-radius: 9999px;\r\n}\r\nnav ul li a {\r\n  text-decoration: none;\r\n  color: #3498db;\r\n  padding: 10px;\r\n  border: 1px solid #3498db;\r\n}\r\n```\r\n### 8. Extend Selector - Inheritance (.nav-item)\r\n\r\n**YAML:**\r\n```yaml\r\n.nav-item:\r\n  extend: base-style\r\n  background-color: \"#f5f5f5\"\r\n\r\n.base-style:\r\n  color: $primary-color\r\n  margin: $padding\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n.nav-item {\r\n  @extend .base-style;\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.base-style {\r\n  color: $primary-color;\r\n  margin: $padding;\r\n}\r\n```\r\n\r\n**CSS:**\r\n```css\r\n/* Doesn't scale well!! */\r\n\r\n.nav-item {\r\n  background-color: #f5f5f5;\r\n}\r\n\r\n.base-style, .nav-item {\r\n  color: #3498db;\r\n  margin: 10px;\r\n}\r\n```\r\n\r\n### 9. Looping through Colors (@each)\r\n\r\n**YAML:**\r\n```yaml\r\neach $color in $colors:\r\n  .color-#{$color}:\r\n    color: $color\r\n\r\neach $color $value in $theme-colors: # With maps\r\n  .text-#{$color}:\r\n    color: $value\r\n\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n@each $color in $colors {\r\n  .color-#{$color} {\r\n    color: $color;\r\n  }\r\n}\r\n\r\n@each $color, $value in $theme-colors { // With maps\r\n  .text-#{$color} {\r\n    color: $value;\r\n  }\r\n}\r\n```\r\n**CSS:**\r\n```css\r\n.color-red {\r\n  color: \"red\";\r\n}\r\n\r\n.color-green {\r\n  color: \"green\";\r\n}\r\n\r\n.color-blue {\r\n  color: \"blue\";\r\n}\r\n\r\n/* With maps */\r\n\r\n.text-primary {\r\n  color: #3498db;\r\n}\r\n\r\n.text-secondary {\r\n  color: #2ecc71;\r\n}\r\n\r\n.text-danger {\r\n  color: #e74c3c;\r\n}\r\n\r\n```\r\n### 14. Conditional Statements (@if, @else if, @else)\r\n\r\n**YAML:**\r\n```yaml\r\nif $theme == 'dark':\r\n  body:\r\n    background-color: black\r\n    color: white\r\n\r\nelif $theme == 'light':\r\n  body:\r\n    background-color: white\r\n    color: black\r\nelse:\r\n  body:\r\n    background-color: green\r\n    color: red\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n@if $theme == 'dark' {\r\n  body {\r\n    background-color: black;\r\n    color: white;\r\n  }\r\n}\r\n@else if $theme == 'light' {\r\n  body {\r\n    background-color: white;\r\n    color: black;\r\n  }\r\n}\r\n@else {\r\n  body {\r\n    background-color: green;\r\n    color: red;\r\n  }\r\n}\r\n```\r\n\r\n### 15. Loops (@for)\r\n\r\n**YAML:**\r\n```yaml\r\n.scss:\r\n  for $i in 1..3:\r\n    .font-size-#{$i}:\r\n      font-size: nth($font-sizes, $i)\r\n\r\n  for $i in 1..4:\r\n    .padding-#{$i}:\r\n      padding: $i * 10px\r\n```\r\n\r\n**SCSS:**\r\n```scss\r\n.scss {\r\n  @for $i from 1 through 3 {\r\n    .font-size-#{$i} {\r\n      font-size: nth($font-sizes, $i);\r\n    }\r\n  }\r\n  \r\n  @for $i from 1 through 4 {\r\n    .padding-#{$i} {\r\n      padding: $i * 10px;\r\n    }\r\n  }\r\n}\r\n```\r\n**CSS:**\r\n```css\r\n.scss .font-size-1 {\r\n  font-size: \"10px\";\r\n}\r\n.scss .font-size-2 {\r\n  font-size: \"20px\";\r\n}\r\n.scss .font-size-3 {\r\n  font-size: \"30px\";\r\n}\r\n.scss .padding-1 {\r\n  padding: 10px;\r\n}\r\n.scss .padding-2 {\r\n  padding: 20px;\r\n}\r\n.scss .padding-3 {\r\n  padding: 30px;\r\n}\r\n.scss .padding-4 {\r\n  padding: 40px;\r\n}\r\n```\r\n**License:**\r\n\r\nMIT License\r\n\r\n**Contributing:**\r\n\r\nWe welcome contributions to this project! Feel free to fork the repository, make changes, and submit pull requests.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneon-x-hub%2Fyaml-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneon-x-hub%2Fyaml-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneon-x-hub%2Fyaml-css/lists"}