Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I've installed SASS and Ruby… now what?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #155440
    nixnerd
    Participant

    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.

    #155445
    Josh
    Participant

    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.

    #155458
    Alen
    Participant

    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.

    #155462
    Alen
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.