I need to compile multiple sass files in one directory into multiple corresponding css files in another directory. Eg:
src/folder1/file1.scss --compiles to-- public/file1.css
src/folder2/file2.scss --compiles to-- public/file2.css
Here is the command I am using:
./src/*/*.scss ./public
Prior to attempting this, I was compiling all .scss files in place using just ./src/*/*.scss, and was getting the corresponding .css files in their respective directories. Trying to dump these in a different directory, however, is not working. What is happening instead is that one of the .scss files imports a .scss partial an import statement into the .scss file itself, a .scss.map file is created, and nothing else happens after that.
Does SASS even have this capability? I've tried different variations of the above command and occasionally I'll see an error saying that 'public' is a directory, which leads me to believe SASS doesn't allow a directory as the output. In fact, the documentation only provides a single output file as the example for compiling SASS (i.e. sass input.scss output.css).
I'm using NPM scripts as a build tool so please no Grunt, Gulp, etc.
*One other thing to note. I just tried using sass --watch instead of the normal compile command, and it sort of does what I need it to:
sass --watch src:public
The only issue I'm having with this is that it does not create only css files in public. Instead it creates a folder and a .css and .css.map file in the folder. It seems SCSS will add a path for each .scss file respective to the relative path traversed by watch. This solution would be ideal if it would not create this extra folder.
You can compile multiple sass files into multiple css files by specifying multiple source:output separated by a space like this:
sass --watch src/file1.scss:dist/file1.css src/file2.scss:dist/file2.css
You can change the src or output paths as needed.
You have to tell the sass watch what file you want it to output, just like this:
sass --watch style.scss:style.css
You can even set it to output a compressed css file (the .map file happens automatically for each css):
sass --watch style.scss:style.css --style compressed
I usually go to one file, but theoretically you can watch different scss files and compile them to separate css files, not sure why you'd want to?, but it can be done.
For anything you want to group, import the related files to a scss file then compile it down to one file, then repeat these steps.
(Note: I'm running the sass gem for the above commands in Node.)
Related
I have a project with multiple directories with .sass files in each directory.
I want sass to watch all files and recomplie them if changes happen so sass --watch projectDirworks great but I also want to add a postfix to all compiled file for example myfile.sass will be myfile.post.css.
How do I do that?
If I cannot then is there a way to run batch sass commands from file?
I would suggest using a build tool such as gulp/grunt/webpack to watch your files and the compile your sass.
here is something that could get you started https://css-tricks.com/gulp-for-beginners/
Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.
Please don't shoot me if this is a stupid question. My sass workflow looks like this. I navigate to the directory I'm working in and use the command sass --watch . to get it to watch the current directory. Then I usually separate my files into partials and import them into a main file. Once I'm happy with the changes I upload everything to the server.
Now however, I find myself in a situation where I want to make a quick visual change to something on my live site. Normally in CSS I would just download the style.css file make the change and re-upload it. The only way I could see this working in SASS is downloading all my scss files, typing in the sass --watch . command again, making that small change and then re-uploading everything via FTP.
Is this the only way? Is there an easier solution?
Are you just using sass to generate a css file in the command line? If so, you don't even really need to upload the sass files to your server. You can just upload the css file that sass --watch generates.
If you do want the sass files on your server though, you only need to upload the changed sass file(s) and any updated css file(s) that is generated.
If your main file imports _a.sass, _b.sass, and _c.sass and you only make changes to _b.sass, you would only need to upload _b.sass and the css that is generated, but make sure you have fresh copies of _a.sass and _c.sass locally before you make edits.
I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.
Should I put all of my css in the sass folder with the .scss files, afterall .scss ends up being used in the .css files? How should I decide when to use the .scss & .css.
Compass puts your .scss files in your_rails_app/app/stylesheets, and remain your css files in your_rails_app/public/stylesheets by default, for reason. Personally I'll follow it's convention if there is no other issue.
You should always write .scss files, and let compass compiles them into .css files for you. Just place all your old css codes into your screen.scss file first, and clean it up into more structured code while you have time.
After using compass, .scss is your source code, the place you write styles; .css become some machine generate, less-readable files that better execute by machines only. You'll never (hopefully) touch them anymore.