{"library":"postcss-scss","title":"PostCSS SCSS Parser","description":"postcss-scss is a PostCSS syntax parser specifically designed to handle SCSS files, enabling the vast ecosystem of PostCSS plugins to process SCSS source code. Currently at version 4.0.9, this module's primary function is to interpret SCSS constructs such as mixins (parsed as custom at-rules) and variables (parsed as properties). It's crucial to understand that postcss-scss *does not compile SCSS* into standard CSS; instead, it provides an AST (Abstract Syntax Tree) that allows PostCSS plugins to perform transformations directly on SCSS syntax. This bridges the gap between Sass development and PostCSS tooling. While `postcss-scss` itself has an irregular release cadence, it closely follows major PostCSS versions, which are actively maintained.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-scss"],"cli":null},"imports":["import scss from 'postcss-scss';","// postcss.config.mjs\nexport default {\n  syntax: await import('postcss-scss')\n};","const scss = require('postcss-scss');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import postcss from 'postcss';\nimport scss from 'postcss-scss';\nimport autoprefixer from 'autoprefixer';\n\nconst scssInput = `\n$primary-color: #3498db;\n\n.container {\n  display: flex;\n  .item {\n    color: $primary-color;\n    // This is an SCSS inline comment\n    padding: 10px;\n    @include respond-to('medium') {\n      font-size: 16px;\n    }\n  }\n}\n`;\n\nasync function processScss() {\n  try {\n    const result = await postcss([autoprefixer]).process(scssInput, {\n      syntax: scss,\n      from: 'src/style.scss',\n      to: 'dist/style.css'\n    });\n    console.log('Processed CSS:\\n', result.css);\n    console.log('\\nWarnings:\\n', result.warnings().toString());\n  } catch (error) {\n    console.error('PostCSS processing failed:', error);\n  }\n}\n\nprocessScss();","lang":"typescript","description":"Demonstrates how to use `postcss-scss` with PostCSS and `autoprefixer` to process SCSS input. It highlights its role as a parser, not a compiler, allowing PostCSS plugins to transform SCSS syntax into CSS.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}