Title: Theme SCSS Compiler Author: Simon Mista Published: 16 de mayo de 2026 Last modified: 16 de mayo de 2026 --- Buscar plugins ![](https://ps.w.org/theme-scss-compiler/assets/banner-772x250.png?rev=3533679) ![](https://ps.w.org/theme-scss-compiler/assets/icon-256x256.png?rev=3533679) # Theme SCSS Compiler Por [Simon Mista](https://profiles.wordpress.org/simonmista/) [Descargar](https://downloads.wordpress.org/plugin/theme-scss-compiler.1.0.0.zip) * [Detalles](https://es.wordpress.org/plugins/theme-scss-compiler/#description) * [Valoraciones](https://es.wordpress.org/plugins/theme-scss-compiler/#reviews) * [Instalación](https://es.wordpress.org/plugins/theme-scss-compiler/#installation) * [Desarrollo](https://es.wordpress.org/plugins/theme-scss-compiler/#developers) [Soporte](https://wordpress.org/support/plugin/theme-scss-compiler/) ## Descripción Theme SCSS Compiler lets you manage **multiple SCSS CSS pairs** in the active theme directly from the WordPress admin (Tools Theme SCSS Compiler). It uses the bundled scssphp library — no Node.js, no build tools, no command line. SCSS is the modern Sass syntax (CSS-superset with braces and semicolons). #### Features * **Multiple file pairs** – configure as many SCSS CSS pairs as your theme needs( paths relative to the active theme). * **Per-pair Context** – each pair runs on either the Frontend (`wp_enqueue_scripts`) or the Admin (`admin_enqueue_scripts`). * **Per-file versioning** – each pair has its own version. Bumps are applied automatically via the `style_loader_src` filter, so your theme files stay untouched. * **Smart change detection** – the version only bumps when the compiled CSS content of that specific pair actually changed. No cache busting for files you didn’t touch. * **`@import`-aware auto-recompile** – every SCSS partial (`@import`, `@use`, ` @forward`) is tracked. Editing a partial alone triggers a recompile on the next admin page load — no need to touch the entry SCSS file. * **Compressed (production) or expanded (development)** SCSS output. * **Auto-compile** when an SCSS source (or any of its imports) changes or the CSS output is missing – no white layouts after a fresh deployment. * **Auto-enqueue** – the plugin runs `wp_enqueue_style()` for every configured pair on its respective context. Skips files that are already registered, so it never duplicates output. * **Manual compile button** with live AJAX feedback and persistent error display in the admin. * **Concurrent-compile lock** – a transient-based mutex prevents two admins triggering compiles at the same time from corrupting the CSS output. * **Code-first configuration** – every option (pairs, output style, auto-compile, auto-enqueue, bump version) can be defined as a PHP constant in `wp-config.php`, in your theme, or via your `.env` / Bedrock workflow. * **Admin-only access** – every endpoint requires the `manage_options` capability by default. Filterable via `tscsscompiler_capability` if you need to grant access to a custom role. * **Modern codebase** – PHP 8.1+, WCAG 2.1 AA compliant admin UI, fully translated to German out of the box. #### Privacy / GDPR This plugin makes **no external HTTP requests**, sets **no cookies**, runs **no telemetry**, and does **not** track users. All processing happens locally on your server. The bundled libraries (scssphp, league/uri, symfony/filesystem, PSR HTTP interfaces) are MIT licensed and GPL-compatible. Source code is included in the plugin’s `vendor/` directory. ## Capturas * [[ * Settings page under Tools Theme SCSS Compiler in production-default mode — multiple file pairs with per-pair version and Frontend/Admin context, auto-compile and auto-enqueue enabled. * [[ * Same page in development workflow — Expanded output for readable CSS, manual- compile mode with success feedback after a Compile-now click. ## Instalación 1. Upload the `theme-scss-compiler` folder to `/wp-content/plugins/`. 2. Activate the plugin in **Plugins**. 3. Go to **Tools Theme SCSS Compiler**, configure your SCSS / CSS paths and the per- pair context. 4. Either click **Compile now** or simply load any admin page – auto-compile is on by default and will create the CSS output the first time. For developers who prefer code-based configuration, see the FAQ on configuring the plugin via constants — `wp-config.php`, your theme, or `.env` / Bedrock. ## FAQ ### Which SCSS version does this support? The plugin bundles scssphp 2.1, which supports modern SCSS syntax compatible with Dart Sass. ### When does a version actually get bumped? Only when the compiled CSS output for that specific pair has changed compared to the previously written file. Comments-only edits or no-op SCSS changes that result in identical compressed CSS do not bust the cache. Other pairs keep their existing versions. ### How does the per-pair Context (Frontend / Admin) setting work? Each pair has a _Context_ field. Pairs set to **Frontend** are auto-enqueued via` wp_enqueue_scripts` (only on the public site). Pairs set to **Admin** are auto-enqueued via `admin_enqueue_scripts` (only on `/wp-admin` pages). The `style_loader_src` version filter applies in both contexts whenever a configured CSS file is printed. Default for new pairs is **Frontend**. ### Who can access the admin page? By default only WordPress administrators (users with the `manage_options` capability). The Tools Theme SCSS Compiler submenu, the form save handler, the AJAX compile endpoint and the auto-compile hook all enforce this capability. Editors, Authors and other roles cannot see or use the plugin’s UI. If you need to grant access to a different role (for example a custom «Theme Developer» role), use the `tscsscompiler_capability` filter: ``` add_filter( 'tscsscompiler_capability', static function () { return 'edit_theme_options'; } ); ``` ### What happens if the CSS file is missing? If **Auto-compile** is enabled (default: on), every admin page load checks whether the configured CSS files exist or whether the SCSS source — or any of its `@import`- ed partials — is newer. Missing or stale outputs are compiled silently. This protects against white layouts after a fresh deployment or `git pull`. ### Does it detect changes in `@import`-ed partials? Yes. After every successful compile the plugin records the full list of files that scssphp pulled in (including transitive `@import` / `@use` / `@forward` chains) into a per-pair dependency map. The auto-compile check compares the modification time of each tracked partial against the CSS output. So if `style.scss` does `@import" menu-styles";` and you edit `menu-styles.scss`, the next admin page load triggers a recompile automatically — you don’t have to touch `style.scss`. ### Should I let the plugin enqueue my CSS, or do it in `functions.php`? Both work. **Auto-enqueue** is on by default — the plugin runs `wp_enqueue_style()` for every configured pair on its respective context (Frontend or Admin). It runs at `PHP_INT_MAX` priority and skips any URL that’s already registered, so it never duplicates output. If you’d rather keep full control of the asset pipeline in your theme, just disable the option and call `wp_enqueue_style()` yourself. ### Can I configure the plugin from code instead of the admin form? Yes. Define `TSCSSCOMPILER_PAIRS` and the plugin reads pairs from there instead of the database. The admin form switches to a read-only state and the save handler is disabled. ``` define( 'TSCSSCOMPILER_PAIRS', [ [ 'scss_path' => 'assets/scss/style.scss', 'css_path' => 'assets/css/style.css', 'version' => '1.0.0', 'context' => 'frontend' ], [ 'scss_path' => 'assets/scss/style-admin.scss', 'css_path' => 'assets/css/style-admin.css', 'version' => '1.0.0', 'context' => 'admin' ], ] ); ``` The remaining behaviours can be toggled individually: * `TSCSSCOMPILER_AUTO_COMPILE` – `true` / `false` * `TSCSSCOMPILER_BUMP_VERSION` – `true` / `false` (note: bumping is a no-op when defined via constant — versions live in your code) * `TSCSSCOMPILER_AUTO_ENQUEUE` – `true` / `false` * `TSCSSCOMPILER_OUTPUT_STYLE` – `'compressed'` / `'expanded'` ### Where can I put the `define()` calls? Three common places: **1. `wp-config.php`** (loaded earliest, recommended for everything): ``` define( 'TSCSSCOMPILER_OUTPUT_STYLE', 'compressed' ); ``` **2. Theme `functions.php`** (use the `after_setup_theme` hook so the constant exists by the time the plugin reads it): ``` add_action( 'after_setup_theme', static function () { if ( ! defined( 'TSCSSCOMPILER_PAIRS' ) ) { define( 'TSCSSCOMPILER_PAIRS', [ [ 'scss_path' => 'assets/scss/style.scss', 'css_path' => 'assets/css/style.css', 'version' => '1.0.0', 'context' => 'frontend' ], ] ); } } ); ``` **3. `.env` + `wp-config.php` (Bedrock-style)**: ### .env TSCSSCOMPILER_AUTO_ENQUEUE=true TSCSSCOMPILER_OUTPUT_STYLE=compressed ### wp-config.php (or config/application.php in Bedrock) if ( getenv( ‘TSCSSCOMPILER_AUTO_ENQUEUE’ ) !== false ) { define( ‘TSCSSCOMPILER_AUTO_ENQUEUE’, filter_var( getenv( ‘TSCSSCOMPILER_AUTO_ENQUEUE’ ), FILTER_VALIDATE_BOOLEAN ) );} if ( $style = getenv( ‘TSCSSCOMPILER_OUTPUT_STYLE’ ) ) { define( ‘TSCSSCOMPILER_OUTPUT_STYLE’, $style ); } Pairs as a deep array don’t fit naturally in `.env` — define them in `wp-config. php` (or `config/application.php` in Bedrock) instead. ### Why do I see a notice «Configured via wp-config.php» on the admin page? That means `TSCSSCOMPILER_PAIRS` is defined somewhere (wp-config, theme, .env bridge). The form is intentionally read-only in that state — to make changes, edit the source where the constant is defined. Boolean toggles like `…_AUTO_COMPILE` defined via constants are also reflected as locked switches. ### Is the plugin accessible? Yes. The admin UI is built to **WCAG 2.1 AA**: semantic HTML with proper heading hierarchy, ARIA roles for status / alert regions, keyboard-focusable controls with visible focus rings, sufficient colour contrast (4.5:1 minimum for body text, 3: 1 for UI components), and minimum 12px font size for caps-styled labels. All decorative SVG icons are marked `aria-hidden="true"`. ### Is there a German translation? Yes, ships out of the box. All admin strings, hints and error messages are translated to German (`de_DE`). ## Reseñas No hay valoraciones para este plugin. ## Colaboradores y desarrolladores «Theme SCSS Compiler» es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Simon Mista ](https://profiles.wordpress.org/simonmista/) [Traduce «Theme SCSS Compiler» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/theme-scss-compiler) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/theme-scss-compiler/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/theme-scss-compiler/) o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/theme-scss-compiler/) por [RSS](https://plugins.trac.wordpress.org/log/theme-scss-compiler/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios #### 1.0.0 * Initial release. * Multiple SCSS CSS pairs with per-pair version and Frontend/Admin context. * `@import`-aware dependency tracking – every imported partial is recorded; editing a partial alone triggers auto-recompile. * Smart change detection via content comparison – versions only bump on real CSS changes. * Auto-compile on missing or stale output. * Auto-enqueue with duplicate detection (runs at `PHP_INT_MAX` priority). * Manual compile button with AJAX feedback. * Concurrent-compile lock to prevent race conditions on busy multi-admin sites. * Code-first configuration via `TSCSSCOMPILER_*` constants. * `tscsscompiler_capability` filter for granting access to custom roles. * Filesystem writes via WordPress `WP_Filesystem` API. * WCAG 2.1 AA compliant admin UI. * German translation included. * PHP 8.1+ required. * Bundles scssphp 2.1 (MIT) and dependencies. ## Meta * Versión **1.0.0** * Última actualización **hace 2 días** * Instalaciones activas **Menos de 10** * Versión de WordPress ** 6.3 o superior ** * Probado hasta **6.9.4** * Versión de PHP ** 8.1 o superior ** * Idioma * [English (US)](https://wordpress.org/plugins/theme-scss-compiler/) * Etiquetas: * [compiler](https://es.wordpress.org/plugins/tags/compiler/)[css](https://es.wordpress.org/plugins/tags/css/) [sass](https://es.wordpress.org/plugins/tags/sass/)[scss](https://es.wordpress.org/plugins/tags/scss/) [theme](https://es.wordpress.org/plugins/tags/theme/) * [Vista avanzada](https://es.wordpress.org/plugins/theme-scss-compiler/advanced/) ## Valoraciones Aún no se han enviado valoraciones. [Your review](https://wordpress.org/support/plugin/theme-scss-compiler/reviews/#new-post) [Ver todas las valoraciones](https://wordpress.org/support/plugin/theme-scss-compiler/reviews/) ## Colaboradores * [ Simon Mista ](https://profiles.wordpress.org/simonmista/) ## Soporte ¿Tienes algo que decir? ¿Necesitas ayuda? [Ver el foro de soporte](https://wordpress.org/support/plugin/theme-scss-compiler/)