Sublime Text: Build System for SASS (sourcemaps, compressed)
A CSS preprocessor can be a ease for developing larger web projects. I widely use SASS and it satisfies me especially for larger project like wordpress themes. It comes as ruby gem meaning you have to run a Ruby enviroment to get access to the SASS command line tools. Installing Ruby and SASS as Ruby gem is straightforward and well documented by SASS itself on their website. Once you got SASS running as command line application you can use it to process
Using the preprocessor as command line tool while developing with a IDE like Sublime Text can be very nerving, but rescue is in sight. Sublime Text has a very good Build System to use command line build tools within Sublime Text. So it is easy to create a small build-script for using the SASS compiler from Sublime Text. You can find the build system option inside Sublime Text as follows:
I recommended to remove the sourcemap link and file for deployment, because it is not needed and a extra file to load. The created files are placed one folder level below the source file. To adjust the output folder (and file name) you have to edit the build file. For example, saving your CSS files into a
Download and see my script here at Github
Further you can use various plugins to speed up development and deployment. For example you can use the great SFTP Plugin to monitor your CSS files and upload it automatically on save. The SublimeOnSaveBuild is interesting as well.
.scss or .sass files to a simple CSS file. While compiling the your files there are also .map files generated. These are for debugging purposes and their generation can be disabled by using the option --sourcemap= none.Speed up SASS with Sublime Text - Build Scripts and Plugins
Using the preprocessor as command line tool while developing with a IDE like Sublime Text can be very nerving, but rescue is in sight. Sublime Text has a very good Build System to use command line build tools within Sublime Text. So it is easy to create a small build-script for using the SASS compiler from Sublime Text. You can find the build system option inside Sublime Text as follows:
Tools ->Build [...]. Using the option New Build System gives you a simple build script ready to extend. Then save it and use it. I will share my own SASS script to provide a good working basis. My script will generate three files, named by the processed source file:- A uncompressed css file (*.css) for reference
- A compressed css file (*.min.css) for development
- A sourcemap file used by the compressed files
I recommended to remove the sourcemap link and file for deployment, because it is not needed and a extra file to load. The created files are placed one folder level below the source file. To adjust the output folder (and file name) you have to edit the build file. For example, saving your CSS files into a
css folder you have to change the path as follows: [...], "$file:${file_path}/../css/${file_base_name}.css"], [...]Download and see my script here at Github
Further you can use various plugins to speed up development and deployment. For example you can use the great SFTP Plugin to monitor your CSS files and upload it automatically on save. The SublimeOnSaveBuild is interesting as well.