hypejunction/elgg-scss

This package is abandoned and no longer maintained. No replacement package was suggested.

Runtime compilation of SCSS files

dev-master 2017-11-28 13:42 UTC

Requires

• php: >=5.5
• composer/installers: ~1.0
• leafo/scssphp: ^0.7.1

GPL-2.0

• Ismayil Khayredinov

• css
• plugin
• sass
• scss
• compile
• elgg

README

After a lot of struggling, I have abandoned the idea of trying to compile SCSS server-side. There are too many pitfalls and things can go seriously wrong. Use command line tools and serve compiled CSS from disk rather than trying to compiled it at runtime.

Features

• Allows you to use .scss files directly in the view system
• Resolves and compiles import paths on the fly (no need for ruby or npm)

Usage

You can extend any .css file with .scss

// custom.scss
@import "variables"; // this view is already included and can be extended by other plugins
@import "custom2"; // you can import any other .scss view
@import "external/partial"; // this can be a view residing in another plugin and named as external/_partial.scss  

elgg_extend_view('_variables.scss', '_my_variables.scss');
elgg_extend_view('elgg.css', 'custom.scss');

Optionally, you can use 'vars','scss' hook to set global scss variables.

Conventions

• Prefix your partial scss sheets with an underscore to ensure they are not needlessly compiled, e.g. _reusable.scss

• You can use scss syntax in your css files. This might come handy when you want to overwrite a core css view. It is also easier to work with .css files as they are treated as simplecache resources by default.

• The compiler seems to have trouble with full sheets located outside of the root. If you notice that compiler is complaining, add a view to the root and import your files located elsewhere, e.g. if your sheet is importing partials and located in /views/default/my-theme/elements/sheet.scss, it may not compile. Add a prefixed sheet to /views/default/my-theme.sheet.scss and add @import "my-theme/elements/sheet";