PHPackages dnafactory/module-scss - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. dnafactory/module-scss ActiveMagento2-module[Utility & Helpers](/categories/utility) dnafactory/module-scss ====================== Provides an scss preprocessor to Magento 2 1.2.0(1mo ago)02.3k↓50%1BSD-3-ClausePHPPHP ~7.4.0|~8.1.0|~8.2.0|~8.3.0|~8.4.0 Since Nov 20Pushed 1mo ago3 watchersCompare [ Source](https://github.com/dnafactory/magento2-module-scss)[ Packagist](https://packagist.org/packages/dnafactory/module-scss)[ RSS](/packages/dnafactory-module-scss/feed)WikiDiscussions main Synced 4w ago READMEChangelog (8)Dependencies (4)Versions (14)Used By (1) M2 Scss Preprocessor -------------------- [](#m2-scss-preprocessor) [![License](https://camo.githubusercontent.com/b3775a2de17853a90995faa104f941eef3ad3c40cc89e34b8b1eaea014614d4e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d425344253230332d2d436c617573652d626c75652e737667)](https://opensource.org/licenses/BSD-3-Clause) ========================================================================================================================================================================================================================================================================================== [](#) Provides an Scss preprocessor ([scssphp/scssphp](https://github.com/scssphp/scssphp)) to Magento 2 as an Alternative Source Content Processor. Supports Magento 2 Theme inheritance and Assets fallback system. Frontend compilation is currently not tested and not fully implemented yet. --- ### How to use [](#how-to-use) Put your base scss file in your preferred location as Magento 2 standards. Ex: - app/design/frontend/MyCompany/theme/web/css/--->*mystyle.scss* - app/code/MyCompany/MyModule/view/frontend/web/css/--->*mystyle.scss* - app/design/frontend/MyCompany/theme/TheirCompany\_TheirModule/web/css/--->*mystyle.scss* Then add your source files references as you do with .less ones. Oh, and you can use Magento custom directives (like @magento\_import) too. Ex: ``` @import 'source/_mixins'; @import 'source/functions.scss'; //@magento_import 'source/_extends.scss'; ``` ### The @vars\_import directive [](#the-vars_import-directive) As Magento 2 comes only with .less preprocessor, you may need to merge your new shiny scss project into the old fashioned .less theme. When it comes to needs, you can simply use the **@vars\_import** directive on top of your main scss file to load and translate .less vars. Ex: ``` //@vars_import 'source/_variables.less'; @import 'source/_mixins'; @import 'source/functions.scss'; //@magento_import 'source/_extends.scss'; ``` All less variables will be translated into scss readable ones, so you can then reference them in your scss subsequent assets. Ex: *@primary\_\_color* will be accessible as **$primary\_\_color** When you are coding in a module context you may need to import Magento 2 .less lib vars. Therefore, to avoid context issues, it may come in handy to use the **@vars\_import** directive with the addition of the **(lib)** identifier. Ex: ``` //@vars_import (lib) 'source/lib/_lib.less' ``` *Happy Coding* ### Health Score 54 — FairBetter than 97% of packages Maintenance93 Actively maintained with recent releases Popularity18 Limited adoption so far Community12 Small or concentrated contributor base Maturity79 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~186 days Recently: every ~494 days Total 12 Last Release 37d ago Major Versions 0.9.0 → 1.0.0-rc2020-11-28 PHP version history (3 changes)0.1.0PHP ~7.1|~7.2 1.1.2PHP ^7.1|^8.1 1.2.0PHP ~7.4.0|~8.1.0|~8.2.0|~8.3.0|~8.4.0 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/65351006?v=4)[DNAFactory](/maintainers/dnafactory)[@dnafactory](https://github.com/dnafactory) ![](https://avatars.githubusercontent.com/u/5919607?v=4)[Ciro Arcadio](/maintainers/ciroarcadio)[@ciroarcadio](https://github.com/ciroarcadio) --- Top Contributors [![ciroarcadio](https://avatars.githubusercontent.com/u/5919607?v=4)](https://github.com/ciroarcadio "ciroarcadio (14 commits)") --- Tags sassscssmagento2preprocessor ### Embed Badge ![Health badge](/badges/dnafactory-module-scss/health.svg) ``` [![Health](https://phpackages.com/badges/dnafactory-module-scss/health.svg)](https://phpackages.com/packages/dnafactory-module-scss) ``` ### Alternatives [matomo/matomo Matomo is the leading Free/Libre open analytics platform 21.7k39.6k](/packages/matomo-matomo)[october/rain October Rain Library 1601.7M99](/packages/october-rain)[scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62831.2M339](/packages/scssphp-scssphp)[contao/core-bundle Contao Open Source CMS 1301.7M3.0k](/packages/contao-core-bundle)[nizsheanez/yii2-asset-converter Less, Sass, Scss and Phamlp converter for Yii2. No system requires. yii2-composer support, Less autoupdate, customizing of output directory 64171.8k6](/packages/nizsheanez-yii2-asset-converter)[wapplersystems/ws-scss Compiles SCSS to CSS at runtime with caching, TypoScript variables and EXT: import support 11154.7k9](/packages/wapplersystems-ws-scss) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)