I've installed SASS and Ruby… now what?

[nixnerd]

Someone on these forums told me to enter this into the terminal:

watch –sass style.scss:style.css –style compressed

Will this automatically take care of any file named style.css or only within a certain directory? Also, is this the final step? Then do I just start coding with SASS?

Can I use Sumblime Text 2? Do I need a GUI client?

Any answers to these questions would be greatly appreciated.

[Josh]

That will watch only within the directory that command is run within, I believe.

Compass is a timesaver, for sure, in that it provides a number of handy mixins out of the box. I use it for things like color functions and border-radius all the time. Compass is installed per project, and must be included in your style.scss file like so: @import "compass";

You certainly can use Sublime Text. From the vibes I’m getting on your level of comfort with this, I would recommend a GUI. If you’re on a Mac, I highly recommend CodeKit. If Windows, Prepros is pretty awesome.

[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.

[Alen]

Yes. Just configure your paths in the config file and your good to go.

[Author]

Posts