https://github.com/ikkez/f3-assets-sass

SASS addon for F3 Sugar Assets plugin
https://github.com/ikkez/f3-assets-sass

fat-free-framework minification php sass scss sugar-assets

Last synced: 20 days ago
JSON representation

SASS addon for F3 Sugar Assets plugin

• Host: GitHub
• URL: https://github.com/ikkez/f3-assets-sass
• Owner: ikkez
• License: gpl-3.0
• Created: 2018-03-08T15:48:23.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-04-25T14:07:00.000Z (over 4 years ago)
• Last Synced: 2024-08-09T03:03:27.999Z (5 months ago)
• Topics: fat-free-framework, minification, php, sass, scss, sugar-assets
• Language: PHP
• Size: 19.5 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SASS addon for F3 Sugar Assets

This is an extention to add a SASS/SCSS compiler to the existing [Assets Management plugin](https://github.com/ikkez/f3-assets) for the [PHP Fat-Free Framework](https://github.com/bcosca/fatfree).

## Install

When you have F3-Assets already up and running, just run `composer require ikkez/f3-assets-sass`. 

In case you do not use composer, copy the `assets/` folder into your `AUTOLOAD` path, install [scssphp/scssphp](https://github.com/scssphp/scssphp) separately and you should be ready to go.

## Usage

To register the sass compiler, just add this line to your view controller, or where ever you have put the initialisation of the main assets plugin. 

```php

// register sass handler

\Assets\Sass::instance()->init();

```

Within your templates you can then easily use `.scss` files directly, as it would be normal css files.

```html

```

That's it. Compilation, minification and concatenation with other files is now handled by the assets plugin.

The base directory of the sass file can also be used as import path, 

so using `@import` within your sass file can be used to load other relative sass files. So recompiling a whole bootstrap frontend is not problem:

```html

```

The only drawback with `@include` files is, that changes to those files are currently not detected automatically, 

so the whole main sass file does not update on the fly. However, you can add the `watch` attribute and define 

one or multiple paths to scan for file changes - wildcards are possible:

 

```html

```

NB: The `watch`-attribute should only be considered while working on the files, because scanning for file modification times isn't necessary for production-ready styles and would, depending on the amount of files to scan, slow things down. 

If you need to refresh files on a production environment, it's recommended to clear the temp files with `\Assets::instance()->clear();`, instead of proactive looking for changes.

If you like to add sass files programmatically, you should simply treat them like normal css files:

````php

$opt = [

  'watch'=>'ext/*.scss'

];

\Assets::instance()->add('scss/main_styles.scss', 'css', 'head', 5, NULL, $opt);

````

License

-

GPLv3