Mecha CMS

Add extra functionality to the core engine.


Table of Contents
  1. Usage 
  2. Art Direction 

Convert SCSS syntax into CSS syntax.

Download Stable Version Download Development Version

Something looks broken? We accept bounties to fix them faster.

v1.4.0273 Downloads
v1.3.2178 Downloads
v1.3.1140 Downloads

SASS is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend SASS with SassScript, a simple scripting language used in SASS files. SASS is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. SASS consists of two syntaxes. The original syntax, called “the indented syntax,” uses a syntax similar to HAML. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

This extension compiles SCSS code into CSS code by looking for files with extension .scss added through the Asset::set() method, storing the compiled results as static files and then displays them as CSS files. The compiled file contents will be updated automatically on every file modification changes on the SCSS files.

.\path\to\file.scss → .\path\to\file.css
.\path\to\scss\file.scss → .\path\to\css\file.css



Note: The scssphp implements SCSS (3.2.12). It does not implement the SASS syntax, only the SCSS syntax.

Art Direction 

To enable this feature requires you to install the Art Direction extension. Though, it’s already included by default in the core. Adding file to a page folder will generate file that contains the compiled results of file automatically:

└── lot\
    └── page\
        ├── lorem-ipsum\
        │   ├── ← Automatic :)
        │   └──