Reply To: I've installed SASS and Ruby… now what?

[Alen]

Benefit of using Sass is that you can separate code into “modules”. For example.

example folder structure:

/utilities/
/utilities/_variables.scss
/utilities/_mixins.scss
/base/
/base/_base-styles.scss
/layout/
/layout/_master-layout.scss
/layout/_grid.scss
/modules/
/modules/_name-of-module.scss

/style..scss <– This file would pull in all the files together and generate your CSS.

so something like (contents of style.scss):

@import "utilities/variables";
@import "utilities/mixins";
@import "base/base-styles";
@import "layout/master-layout";
@import "layout/grid";
@import "modules/name-of-module";

So command:

sass --watch style.scss:style.css

style.scss is input file : style.css is output file

sass --watch /path/to/input/file.scss:../../../../path-to/style.css

You can compile to a file that’s not necessarily in the same directory. Input : Output.

As you can see this let’s you organize your project. If your working on small project you might not need to break apart as much. You can have few files, how ever you choose to organize your project, it’s up to you.

Also notice the naming convention when importing files.

Files that start with _ underscore are referred to as partials. If you use Compass for example, if you do not have underscore Compass would generate that file in CSS version, not what we want… we would want to include it so the compiler knows to only compile that file once it’s included.

So simpler example would be:

_variable.scss
_layout.scss
_about.scss
_contact.scss

style.scss:

@import "variables";
@import "layout";
@import "about";
@import "contact";

sass --watch style.scss:style.css would generate

style.css in same directory.

adding --style compressed at the end of command, compresses your code for production, only use this when you are ready to deploy your project. Since production code doesn’t need comments, spaces and tabs.