{"library":"postcss-sass","title":"PostCSS Sass Parser","description":"postcss-sass is a PostCSS parser designed to interpret and transform Sass-like syntax, leveraging the `gonzales-pe` library as its core parsing engine. It is crucial to understand that this package acts solely as a parser; it converts Sass source code into an Abstract Syntax Tree (AST) that can then be manipulated by PostCSS plugins. It does *not* compile Sass into standard CSS. The package is currently at version 0.5.0 and is explicitly noted as being \"under development,\" which means full compatibility with all Sass syntax is not guaranteed. Its release cadence is somewhat irregular, often focusing on dependency updates, security fixes, and incremental support for Sass features like media queries and loops. A key differentiator is its ability to enable PostCSS transformations directly on Sass source code, allowing for advanced processing workflows before or without full Sass compilation. The underlying `gonzales-pe` library itself has not been updated in several years, which could imply potential long-term maintenance considerations for `postcss-sass` users.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-sass"],"cli":null},"imports":["const postcssSass = require('postcss-sass');","import postcssSass from 'postcss-sass';","const postcss = require('postcss');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const postcss = require('postcss');\nconst postcssSass = require('postcss-sass');\n\n// A simple PostCSS plugin to reverse selector order\nconst reverseSelectors = postcss.plugin('reverse-selectors', () => {\n  return (css) => {\n    css.walkRules((rule) => {\n      rule.selector = rule.selector.split(',').reverse().join(', ');\n    });\n  };\n});\n\nconst sassInput = `\n$primary-color: #333;\n\n.my-button {\n  color: $primary-color;\n  &:hover {\n    color: lighten($primary-color, 10%);\n  }\n}\n\n.another-element {\n  font-size: 16px;\n}\n`;\n\npostcss([reverseSelectors]).process(sassInput, { syntax: postcssSass, from: 'input.scss', to: 'output.css' })\n  .then(result => {\n    console.log('Transformed Sass:\\n', result.css);\n    // Expected output shows selectors reversed (e.g., .my-button:hover, .my-button)\n  })\n  .catch(err => {\n    console.error('Error processing Sass:', err);\n  });\n","lang":"javascript","description":"Demonstrates parsing Sass input with `postcss-sass` and transforming it using a custom PostCSS plugin.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}