├── README.md └── php-sass-watcher.php /README.md: -------------------------------------------------------------------------------- 1 | # PHP-SASS-WATCHER 2 | 3 | *This was meant as an experiment and resulted in [Laravel SASS](https://github.com/panique/laravel-sass), 4 | a better compiler for SASS in pure PHP. There are also better scripts for doing this job, like all the JavaScript build 5 | tools. Please keep this in mind :) !* 6 | 7 | ## What does this tool do ? 8 | 9 | The php-sass-watcher is not a standalone compiler, it's just a little method that uses the excellent 10 | [scssphp compiler](http://leafo.net/scssphp/) written by [Leaf Corcoran](https://twitter.com/moonscript) and adds 11 | automatic interval-compiling to it. 12 | 13 | The php-sass-watcher is one simple php file that runs an unlimited time (!) and compiles all .scss files in your scss 14 | folder to .css files in your css folder automatically in a configurable interval (which is 1 second by default). 15 | That's it. No configuration (outside of the file itself) needs to be done, you can install it within 60 seconds. 16 | It does not mess up your development environment, it's just a tiny file. 17 | 18 | To keep things as minimal as possible, this tool compiles every X seconds, regardless of changes within the files. 19 | This seems weird, but makes sense as checking for changes in the files is more CPU-extensive than simply 20 | re-compiling them. SassWatcher uses scssphp, the best SASS compiler in PHP available. 21 | 22 | ## Which SASS/SCSS version is supported ? 23 | 24 | The currently supported version of **SCSS syntax is 3.2.12**, which is the latest one. 25 | To avoid confusion: SASS is the name of the language itself, and also the "name" of the "first" version of the 26 | syntax (which was quite different than CSS). Then SASS's syntax was changed to "SCSS", which is more like CSS, but 27 | with awesome additional possibilities and features. 28 | The compiler uses the SCSS syntax, which is recommended and mostly used. The old SASS syntax is not supported. 29 | 30 | ## How the tool works: 31 | 32 | * Every X seconds ALL files in the scss folder will be compiled to same-name .css files in the css folder. 33 | * The tool does not stop when a .scss file is broken, has syntax error or similar. 34 | * The tool does not compile when .scss file is broken, has syntax error or similar. 35 | It will only compile next time when there's a valid scss file. 36 | 37 | ## How to install & use this tool 38 | 39 | 1. Download scssphp from http://leafo.net/scssphp and put it somewhere. 40 | 2. Edit $sass_watcher->watch( ... ); in the last line of php-sass-watcher.php and put the path of your scss folder, 41 | your css folder and the location of the scssphp file in. See the parameter list below. 42 | 2. Make sure PHP can write into your CSS folder. 43 | 3. Run the script: Simple way, from browser, just enter the URL to scss-compiler.php: 44 | http://127.0.0.1/folder/php-sass-watcher.php 45 | The script will run forever, even if you close the browser window. 46 | PHPStorm users can run the script by right-clicking the file and selecting "Run php-sass-watcher.php". 47 | 4. To stop the script, stop/restart your Apache/Nginx/etc. or press the red "stop process button in PHPStorm. 48 | 49 | *Please note: Some IDEs / code editors don't show new/updated files instantly. Refresh/reload the files/folders to see 50 | the changes.* 51 | 52 | ## The parameters: 53 | 54 | ```php 55 | $sass_watcher = new SassWatcher(); 56 | $sass_watcher->watch("path/to/scss/", "path/to/css/", 1, "vendor/leafo/scssphp/scss.inc.php"); 57 | ``` 58 | 59 | 1. relative path to your SCSS folder 60 | 2. relative path to your CSS folder (make sure PHP has write-rights here) 61 | 3. the compiling interval (in seconds) 62 | 4. relative path to the scss.inc.php file, which is the main file of the SASS compiler used here. 63 | Download the script manually from http://leafo.net/scssphp/ or "require" it via Composer: `"leafo/scssphp": "0.0.9"` 64 | 5. optional: how the .css output should look like. See http://leafo.net/scssphp/docs/#output_formatting for more. 65 | 66 | ## How to work with mixins 67 | 68 | Currently your mixin files need to be in exactly the same folder like your other .scss, then the @import will work 69 | perfectly. Custom mixing folders are on my todo-list. 70 | 71 | ## Links 72 | 73 | - [Official SASS homepage](http://sass-lang.com/) 74 | - [scssphp SASS compiler homepage](http://leafo.net/scssphp/) 75 | - [SASS at Wikipedia](http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29) 76 | 77 | ## Connected projects 78 | 79 | If you like, check my other projects: 80 | 81 | #### MINI and MINI2 82 | 83 | A super-reduced and naked bare-bone application, just a little application skeleton. 84 | 85 | http://php-mini.com 86 | 87 | #### php-login / HUGE 88 | 89 | A collection of 4 login scripts for PHP, from a super-simple one-file script with a SQLite one-file to a quite 90 | professional MVC frameworks solution (that has been used in large projects). All scripts use the most advanced 91 | hashing algorithms possible in PHP, exactly like the PHP core developers want you to use them. 92 | 93 | http://www.php-login.net 94 | 95 | https://github.com/panique/huge (full framework) 96 | 97 | https://github.com/panique/php-login-minimal (minimal) 98 | 99 | https://github.com/panique/php-login-advanced (advanced) 100 | 101 | https://github.com/panique/php-login-one-file (one-file) 102 | 103 | #### My blog 104 | 105 | http://www.dev-metal.com 106 | 107 | ## License 108 | 109 | This project is licensed under the MIT License. 110 | This means you can use and modify it for free in private or commercial projects. 111 | 112 | ## Contribute 113 | 114 | Feel free to contribute (it's okay to push to master branch as this project is really small). 115 | 116 | ## Support 117 | 118 | If you think this script is useful and saves you a lot of work, then think about supporting the project by renting a 119 | server at [HOST1PLUS](https://affiliates.host1plus.com/ref/devmetal/36f4d828.html). -------------------------------------------------------------------------------- /php-sass-watcher.php: -------------------------------------------------------------------------------- 1 | watch( ... ); in the last line of this file and put your stuff in here, see the parameter 29 | * list below. 30 | * 2. Make sure PHP can write into your CSS folder. 31 | * 3. Run the script: 32 | * a) simple way, from browser, just enter the URL to scss-compiler.php: http://127.0.0.1/folder/php-sass-watcher.php 33 | * The script will run forever, even if you close the browser window. 34 | * b) PHPStorm users can run the script by right-clicking the file and selecting "Run php-sass-watcher.php". 35 | * 4. To stop the script, stop/restart your Apache/Nginx/etc. or press the red "stop process button in PHPStorm. 36 | * 37 | * The parameters: 38 | * 39 | * 1. relative path to your SCSS folder 40 | * 2. relative path to your CSS folder (make sure PHP has write-rights here) 41 | * 3. the compiling interval (in seconds) 42 | * 4. relative path to the scss.inc.php file, which is the main file of the SASS compiler used 43 | * here. Download the script manually from http://leafo.net/scssphp/ or "require" it via Composer: 44 | * "leafo/scssphp": "0.0.9" 45 | * 5. optional: how the .css output should look like. See http://leafo.net/scssphp/docs/#output_formatting for more. 46 | * 47 | * How the tool works: 48 | * 49 | * Every X seconds ALL files in the scss folder will be compiled to same-name .css files in the css folder. 50 | * The tool does not stop when a .scss file is broken, has syntax error or similar. 51 | * The tool does not compile when .scss file is broken, has syntax error or similar. It will only compile next time 52 | * when there's a valid scss file. 53 | */ 54 | class SassWatcher 55 | { 56 | /** 57 | * Watches a folder for .scss files, compiles them every X seconds 58 | * Re-compiling your .scss files every X seconds seems like "too much action" at first sight, but using a 59 | * "has-this-file-changed?"-check uses more CPU power than simply re-compiling them permanently :) 60 | * Beside that, we are only compiling .scss in development, for production we deploy .css, so we don't care. 61 | * 62 | * @param string $scss_folder source folder where you have your .scss files 63 | * @param string $css_folder destination folder where you want your .css files 64 | * @param int $interval interval in seconds 65 | * @param string $scssphp_script_path path where scss.inc.php (the scssphp script) is 66 | * @param string $format_style CSS output format, ee http://leafo.net/scssphp/docs/#output_formatting for more. 67 | */ 68 | public function watch($scss_folder, $css_folder, $interval, $scssphp_script_path, $format_style = "scss_formatter") 69 | { 70 | // go on even if user "stops" the script by closing the browser, closing the terminal etc. 71 | ignore_user_abort(true); 72 | // set script running time to unlimited 73 | set_time_limit(0); 74 | 75 | // load the compiler script (scssphp), more here: http://www.leafo.net/scssphp 76 | require $scssphp_script_path; 77 | $scss_compiler = new scssc(); 78 | // set the path to your to-be-imported mixins. please note: custom paths are coming up on future releases! 79 | $scss_compiler->setImportPaths($scss_folder); 80 | // set css formatting (normal, nested or minimized), @see http://leafo.net/scssphp/docs/#output_formatting 81 | $scss_compiler->setFormatter($format_style); 82 | 83 | // start an infinitive loop 84 | while(1) { 85 | // get all .scss files from scss folder 86 | $filelist = glob($scss_folder . "*.scss"); 87 | // step through all .scss files in that folder 88 | foreach ($filelist as $file_path) { 89 | // get path elements from that file 90 | $file_path_elements = pathinfo($file_path); 91 | // get file's name without extension 92 | $file_name = $file_path_elements['filename']; 93 | 94 | // get .scss's content, put it into $string_sass 95 | $string_sass = file_get_contents($scss_folder . $file_name . ".scss"); 96 | 97 | // try/catch block to prevent script stopping when scss compiler throws an error 98 | try { 99 | // compile this SASS code to CSS 100 | $string_css = $scss_compiler->compile($string_sass); 101 | // write CSS into file with the same filename, but .css extension 102 | file_put_contents($css_folder . $file_name . ".css", $string_css); 103 | } catch (Exception $e) { 104 | // here we could put the exception message, but who cares ... 105 | } 106 | } 107 | // wait for X seconds 108 | sleep($interval); 109 | } 110 | } 111 | } 112 | 113 | $sass_watcher = new SassWatcher(); 114 | $sass_watcher->watch("path/to/scss/", "path/to/css/", 1, "vendor/leafo/scssphp/scss.inc.php"); 115 | --------------------------------------------------------------------------------