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. dnafactory/module-scss

ActiveMagento2-module

dnafactory/module-scss
======================

Provides an scss preprocessor to Magento 2

1.1.2(3y ago)02.3k—0%1BSD-3-ClausePHPPHP ^7.1|^8.1

Since Nov 20Pushed 3y 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 1mo ago

READMEChangelog (8)Dependencies (2)Versions (13)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

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity69

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 ~55 days

Recently: every ~135 days

Total

11

Last Release

1445d ago

Major Versions

0.9.0 → 1.0.0-rc2020-11-28

PHP version history (2 changes)0.1.0PHP ~7.1|~7.2

1.1.2PHP ^7.1|^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/ae060630c3f388ec31ba0a230764210b441db7fdca225c670e11e843cbce3ef6?d=identicon)[dnafactory](/maintainers/dnafactory)

![](https://www.gravatar.com/avatar/f2ba17e191fadc64eef7e823f27ac0c807d278683af25fe2f7b59ec8ae1d8c07?d=identicon)[ciroarcadio](/maintainers/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

[zurb/foundation

The most advanced responsive front-end framework in the world.

29.8k380.2k15](/packages/zurb-foundation)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[foundation/foundation-sites

The most advanced responsive front-end framework in the world.

29.8k8.4k](/packages/foundation-foundation-sites)[nizsheanez/yii2-asset-converter

Less, Sass, Scss and Phamlp converter for Yii2. No system requires. yii2-composer support, Less autoupdate, customizing of output directory

64167.5k6](/packages/nizsheanez-yii2-asset-converter)[ssnepenthe/color-utils

A PHP library for performing SASS-like color manipulations.

631.1M11](/packages/ssnepenthe-color-utils)[panique/php-sass

Compiles your SASS .scss files to .css every time your run your app (in development)

12280.0k](/packages/panique-php-sass)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)