I just started playing with SCSS. It didn’t take very long to learn and, so far, I love it.
There are loads of way to compile your SCSS to CSS to serve to the client. One of the easiest ways to get up and running, if you’re using php, is scssphp. The SCSS is compiled and returns plain CSS, every time a request is made by a client to your server for a page containing SCSS. (I don’t recommend this in production though.)
Setup
Start
Create a directory on your server to house your SCSS test project. Once you complete steps 1-6, your directory should be structured like this:
scss-test-directory/
style.php
index.html
scssphp/
scss.inc.php
...
stylesheets/
main.scss
...
Download
Grab and unarchive scssphp from here, and put it in your new directory.
Create a file
Create a file and call it style.php
. Add the following:
<?php
$directory = "./stylesheets";
require "scssphp/scss.inc.php";
scss_server::serveFrom($directory);
?>
Create Stylesheets Directory
Create a directory in your project directory and call it stylesheets
.
Notice that this directory is referred to (by relative path) in the above php: $directory = "./stylesheets";
Write Some SCSS
Write some SCSS in a new file and save the resultant file into the stylesheets
directory.
Make An Index Page
Make an index page and put whatever you’d like in there.
Link To Your SCSS
Link to your SCSS by including the following line in the index.html
you just created:
<link rel='stylesheet' type='text/css' href='style.php/main.scss' />
in which
style.php
is the php file you created in step 3main.scss
is the scss file you created in step 5 andmain.scss
’s parent directory is the directory configured instyle.php
, namely./stylesheets
Check It Out
Navigate to your test project in a browser.
Note that you might need to change permissions in order for this work.
Long story short, style.php
needs to be able to create – and then write in – scss_cache
, a directory intended to serve as a cache (to save the script from having to recompile scss files that have not been modified since last compile).