claudioldf / php-sass
Compiles your SASS .scss files to .css every time your run your app (in development) - forked from panique/php-sass
Requires
- php: >=5.3.0
- leafo/scssphp: v0.1.1
This package is not auto-updated.
Last update: 2024-12-11 19:25:29 UTC
README
***** THIS PROJECT IS A FORK FROM panique/php-sass ******
The mainly change that I did:
- You can now pass a file on the second parameter, this way, the script will join all in one file.
- The script search in recursive folders also
- When the second parameter is folder targe, the script will keep a mirror of the original source folder (.scss) but in .css format.
Example how to use:
function load_sass($assets, $target_file) { if (getenv('ENV') != 'production') { foreach($assets as $index => $file) { $file_append = ($index==0) ? false : true; SassCompiler::run($file, $target_file, "scss_formatter_compressed", $file_append); } return $target_file; } else { return $target_file; } } load_sass( [ "assets/scss/styles1.scss", "assets/scss/styles2.scss", ... ], "assets/css/style-join-all.css" );
php-sass
Automatic SASS-to-CSS compiling (while being in development, you'll for sure not do this in production). Every time you run your app (hitting index.php for example) php-sass will automatically compile all .scss files in your scss folder to .css files in your css folder. Supports 3.2 version features of SASS (scss syntax) and mixins. Boom! You can also use Compass, but you'll add an older version of Compass's files (as the latest Compass is for SASS 3.3, not 3.2) to your scss folder manually.
Installation & Usage
In your project's composer.json, add these dependencies. If you are not using Composer, then go into the corner and be very very very ashamed of yourself. And then, after standing there for 2-3 hours, watch some tutorials on how to use Composer, it's super-easy and a common minimum-standard in PHP development these days.
"require": { "claudioldf/php-sass": "2.0" }
Install or update your Composer dependencies to add php-sass by doing composer install
or composer update
.
Composer automatically installs everything in require-dev by default.
IMPORTANT: When you later deploy your application and don't want to install the require-dev stuff, then do
composer install --no-dev
(or composer update --no-dev
).
In your application, add this line into your index.php
(or wherever you want to compile SASS to CSS).
If you use this inside common frameworks, make sure you add this before the final application call, so in Laravel
add it before $app->run();
(some frameworks do stuff like exit();
or caching, so the SASS compiler would never be
called).
SassCompiler::run("scss/", "css/");
The first parameter is the relative path to your scss folder (create one) and the second parameter is the relative
path to your css folder. Make sure PHP can write into the css folder. For local development, a hardcore
sudo chmod -R 777 public/css
(when being in /var/www) is totally okay (remember, SASS compiling only happens locally,
for production you'll deploy compiled .css files for sure).
To use the very latest features of SASS:
Currently php-sass fetches v0.1.1 (August 2014) of leafo/scssphp as a compiler. For latest features you might want a newer version, so have a look here https://github.com/leafo/scssphp/releases and edit the composer.json accordingly.
[optional] Good way to use it only in development, not on production
To prevent using the SASS compiler in production, use an environment switch. Nearly all framework have something like this (google for "YOURFRAMEWORK environment"). For native usage: In your Apache vhost config, add a SetEnv variable, depending on what the server is (development, testing, production, etc):
<VirtualHost *:80>
...
SetEnv APPLICATION_ENV production
...
<VirtualHost/>
and in PHP ask for your environment like this:
if (getenv('APPLICATION_ENV') == 'development') { SassCompiler::run("scss/", "css/"); }
Optional features
There's an optional third parameter for SassCompiler::run()
that expects one of the strings explained on
http://leafo.net/scssphp/docs/#output_formatting. This defines the desired output. scss_formatter
is the standard
laravel-sass uses, choose scss_formatter_compressed
if you need a minimized css file. scss_formatter_nested
is
for nested output, optimized for readability.
How @import works
The @import
of sass rules from other files works perfectly. Make sure to import the files like it should be:
If the file is called _colors.scss and is in the basic scss folder:
@import 'colors';
If the file is called _colors.scss and is in the subfolder modules
of the basic scss folder:
@import 'modules/colors';
Read the official docs for more.
Used scripts
This tool uses the excellent scssphp SASS compiler. scssphp supports the latest SCSS syntax (3.2.12).
License
Licensed under MIT. Totally free for private or commercial projects.
Support
If you think this script is useful, then think about supporting the project by renting your next server at Host1Plus or DigitalOcean. Thanks!