- This topic is empty.
November 8, 2013 at 8:49 am #155440nixnerdParticipant
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.November 8, 2013 at 9:33 am #155445JoshParticipant
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:
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.November 8, 2013 at 10:39 am #155458AlenParticipant
Benefit of using Sass is that you can separate code into “modules”. For example.
example folder structure:
/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";
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:
@import "variables"; @import "layout"; @import "about"; @import "contact";
sass --watch style.scss:style.csswould generate
style.cssin same directory.
--style compressedat 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.November 8, 2013 at 11:13 am #155462AlenParticipant
Yes. Just configure your paths in the config file and your good to go.
- The forum ‘CSS’ is closed to new topics and replies.