Mecha CMS

Add extra functionality to the core engine.

SCSS

Table of Contents
  1. Usage 
  2. Art Direction 

Convert SCSS syntax into CSS syntax.

Download Version 1.3.2 Download Development Version

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

SCSS Logo

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

Usage 

Asset::set('.\path\to\file.scss');

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 scss.data file to a page folder will generate css.data file that contains the compiled results of scss.data file automatically:

.\
└── lot\
    └── page\
        ├── lorem-ipsum\
        │   ├── css.data ← Automatic :)
        │   └── scss.data
        └── lorem-ipsum.page