Getting started with SaSS, Foundation, Compass on Windows, for PHP web application development
January 28. 2013
0 Comments
My friend wanted to get started with using Foundation for an upcoming Greenfield project. The trouble is Foundation comes in two flavours:
Execute the command to install the "Compass with Foundation" package
NOTE: If gem install throws an ECONNECTION related error, it would mostly to do with the command prompt unable to connect to internet and this could be because the computer may be behind http proxy. In such cases, refer to gem documentation on how to use it with –http-proxy option.
Create a new Compass website called "Peakbyte.Web"
This creates the following folder structure
The detailed structure is better revealed when we open this website using WebMatrix2
The _settings.scss file contains all the commonly used variables in Foundation. The web developer/designer can either re-use these in their own SCSS by uncommenting the bits as needed.
The app.scss file imports the _settings.scss file and the complete foundation module as shown below
The app.scss is the main SCSS file. This needs to be processed by the SASS pre-processor to produce stylesheets/app.css which is the CSS file referenced in index.html
So, how does the .scss get processed to .css files?
By running the following command, the compass SASS pre-processor will continuously watch for any changes done to the .scss files in the "Peakbyte.Web" folder. If it detects any change, it will process the .scss files and re-generate the stylesheets/app.css file.
So, all that is pending is to learn how to write SCSS and make use of Foundation and Compass modules/features.
- Foundation3 with default CSS
- Foundation3 with SCSS (Sassy CSS, which is the syntax used by SASS – "Syntactically Awesome Style Sheets". SASS is an extension of CSS3 which brings familiar programming concepts to CSS like variables, nesting of selectors, functions aka mixins)






