I have found that you get your concepts right when you explain what you know to someone. So, I’ve decided to blog about my learnings. In the process, understanding what I’ve learnt, better.
I am learning as I write, starting with no prior knowledge of Foundation 4 or SCSS.
What do I need to know?
Ideally, we would need to know the following:
What is it?
Well, as mentioned on the website, Sass is an extension of CSS3. It has two syntaxes.
- SCSS (“Sassy CSS”)
A superset of CSS3. Every valid CSS3 stylesheet is valid SCSS as well. Extension
Pretty much the same as SCSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Extension
So, we don’t have to repeat ourselves in CSS. In my case, repetitions in CSS results in unmanageable code, when I’d like to make changes. For example, while changing the color palette used in my websites. If unmanageable CSS, is not a concern, you can simply go ahead and use Foundation 4 without Compass.
Sass extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. —Wikipedia
Difference between Sass and Scss
There isn’t any difference between the two, of our concern, except for the syntax. The reason for using either of them syntaxes remains the same. In fact, compass allows us to use either of the syntax. More on compiling them, later.
We can see examples of the syntax and the compiled CSS on the website
Before we begin I encourage you to watch the video on the compass help page, which will help you get in terms with why we might want to use compass.
Go ahead, watch it, this page will still be here.
Instead of discussing what compass is and how it works, let us just jump into it.
Here is how to get started:
sudo gem install compass
To install compass. If you don’t have
ruby gem installed, head over to Ruby website
You will need
gem installed to use compass, anyway.
To make sure compass is installed. Mine says
compass create CompassTest
To create a sample compass project
1 2 3 4 5 6 7 8 9 10
We see a bunch of
.scss(sass directory) files with a corresponding compiled
.css (stylesheets directory) file. Let us peep into the
1 2 3 4 5 6
config.rb file to look for the appropriate locations and compiles the css accordingly.
We will also find instructions to compile sass syntax files instead of scss files.
1 2 3 4 5
I have read somewhere that
Too many options/choices can cause depression.
I don’t want to be depressed. I usually ignore options/choices that are not of my immediate concern and come back to them when I need to. So, I’ll leave the other options commented in the file to be checked out at your discretion.
What we have learnt so far is that,
Compass helps us use sass as leverage to create DRY styles for our website, which can be compiled into CSS.
To let compass keep watching for changes in the scss files and compile them into css whenever it detects any changes. This way, we don’t have to keep compiling the scss into css.
The syntax and code is something I’d like to leave for later. I am itching to get going with Foundation 4.
Foundation has a recommended way of installing Foundation 4 for Sass. Lets go ahead and do that.
All the foundation specific SCSS files are now located in your
In my case it is
All the foundation references are from this
zurb-foundation gem installation directory.
For a reference, you may want to checkout the github project.
All we need to refer to, is the
scss folder in the cloned
foundation directory. More on that, later.
Let us create a new foundation 4 project with compass.
A look at the created application’s directory structure
1 2 3 4 5 6 7 8 9 10
config.rb is our goto file for the compass configurations. As discussed in the compass section.
Zepto can be thought of as a lightweight jQuery framework, with priority given to mobile browsers.
images is the images folder. We may have to create this folder, if it is not automatically created.
sass is the folder in which compass looks for the scss files by default.
stylesheets is the folder in which the compiled css files are deployed, by compass.
The above folder names and paths are just the default. We can rename/move the folders anyway/anywhere we’d like. We just have to make sure to change
humans.txt a file used to describe the site and it’s contributors.
robots.txt used to prevent web crawlers and web robots from accessing certain parts of the website.
index.html We need to see your changes on a web page right? This is the default one.
We will get to changing this, when we move to integrate this with an MVC framework of some kind. This is something for another post.
In the meantime, we will use this file.
Files of our concern
We will work on two particular Scss files in the next post.