Hi there guys,

I'm wanting to use something called "ProfoundGrid" as a base for a site I'm making. (I would post a link but I'm very limited without more than 25 posts)

At the moment I'm using Ruby and Compass (Windows), but I'm having a little difficulty understanding how the files link up and what not. You can see the file structure for the PrfoundGrid I'm interested in at Github.

The main grid file is called "_grid(DOT)scss", which I'm pretty sure it used to control the grid system. Say I wanted to decrease the gutter width ($gutter_width) of the grid, how would I go about doing that? I've tested a few tutorials and understand about using the "--watch" command to sync up a scss and css file, but I'm just unsure how to get it all working in this instance as surley there are more than one css file which need updating when the _grid(DOT)scss changes?

If anyone with a little bit of experience in SASS / this paticluar gird could shed some light on how to set these files up correctly it'd be really helpful.

Thanks for any help on this.

_grid[dot]scss is a partial, donated by the underscore in front of its name.

You need to import this into your main scss using @import "grid".

Compass will then add the contents of _grid[dot]scss into your stylesheet .

so, if using compass, at the top of your scss file you should have

@import "compass";
@import "grid";

Edited April 27, 201313 yr by Wynn

All the imports are done for you as it's bascially a template. For example, at the top of the responsive(DOT)scss it shows:

 

@import 'compass';
@import 'compass/reset';
@import 'compass/css3';

@import "icons/*.png";
@include all-icons-sprites;

@import 'grid/grid';

 

I guess my main questions would be how to get this whole directory of scss files listening for any changes made to the _grid(DOT)scss?

By running

compass watch

Compass will watch for any changes in the scss files


As grid is imported into your stylesheet any changes will be reflected.

Ahhh right, but obioulsly the command I've been using (sass --watch path1:path2) isn't the correct command? Which watch command would I need to run on the grid file?

Ok, I understand now.

In your first post you mention you're using compass, so I assume you've run

gem install compass

If not I suggest you do so, even if you don't use everything compass has to offer, it watches your files better than plain sass.

Next, if your creating a new project you run

compass create yourproject

or for an existing project

cd yourproject
compass init

This will create a directory structure similar to this:

yourproject
- config[dot]rb
- stylesheets
-print[dot]css
-screen[dot]css
-IE[dot]css
-sass
-print[dot]scss
-screen[dot]scss
-IE[dot]scss

you can delete the print, screen and IE stylesheets if you wish.

Create or place any scss files in your sass folder and compass,when run, will create the css files needed in stylesheets.

You can change the directory for your css files in config[dot]rb

once your all setup run

compass watch

and compass will listen for any changes in your sass folder.

 

 

If you don't want to use compass and its helpers.

you can tell sass to watch a whole directory by

sass --watch path/to/sass : path/to/css

Edited April 28, 201313 yr by Wynn

Greatly appreciate the help Wynn, thankyou. That's made it a lot easier to understand!

 

Thanks (: