SASS output filename when 'watching' folder - css

Morning,
I have installed SASS and Ruby and have been using it with much pleasure and delight. When I am watching a simgle file, I can specify the output file name to include .min like this:
sass --watch css/scss/styles.css:css/styles.min.css --style=compressed
This works fine.
However, how would I do the same when watching a folder with the following command:
sass --watch css/scss:css --style=compressed
This works fine for me for all files in the folder. But, it outputs the files as
filename.css
I need to have the output file names to be
filename.min.css
I have read various posts on https://github.com/subash/Prepros/issues/38, which seem to suggest editing a file called config.rb
I found two such files on my system, none of which are located in Ruby. I made the suggested changes, but to no avail.
How can I do this easily?
I have Ruby193 installed.

If you can't rename your files in to [filename].mini.sass so the output will be [filename].mini.css you can include the original files in "proxy" files with names like [filename].mini.sass and compile them.
You can create the configuration file with compass:
compass config [path/to/config] [--sass-dir=sass --css-dir=css ...]
Here's a list of the configurations

Related

PhpStorm compile Less folder to style.css

I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created

SASS Directory won't change

I keep trying to run sass --watch scss:css on a directory and unfortunately, the scss files are not compiling.
SASS does confirm that it's watching for changes, but I've noticed that it is looking in my Program Files directory.
My project with the actual SCSS and CSS files is in my C/username/documents/project/assets directory. If I try to enter that path explicitly in the sass --watch command, I get an error message.
How can I specify the correct directory so SASS will stop trying to compile my files in Program Files?
First make sure your sass is working well and you can try below option for compiling into different folder.
sass --watch input-dir:output-dir

How do I compile SCSS files recursively in folder tree?

I have a complex folder tree where every folder contains several SCSS files. I want to compile them into CSS recursively, all at one time. What command line tool and parameters should I use to do that?
Try using the --watch option with the sass command like so: sass --watch directory this will compile and watch the source files for changes.

Does a save to a scss file automatically update the css file?

I just started working with scss a few days ago (with Webstorm), and it seem to auto generate/update the css file after saving the scss file. Unfortunately, when I save the scss file now, no changes are made to the css file. I was working on these files from a different location, so I am guessing that the Webstorm settings might be different. I thought file watchers might have something to do with it, but I am not sure what goes in the program field. I really have no idea why this is happening.
No, saving a .SCSS file does not automatically compile the final stylesheet file. What you need to do is set up a watch. There are a number of ways to do this (and a number of programs that'll do it for you).
The most straight forward is through the command line. Assuming you have the SASS gem installed (and you're in a ruby environment), do the following in the command line:
Navigate to the folder in which your .scss file/s are kept.
Run the following command: sass --watch style.scss:style.css
Note: The above assumes that both your .scss and .css files are named style, adjust accordingly if they are not. Also, if your .css and .scss files are in different directories you'll have to adjust the paths accordingly.
Remember, sass --watch then yourScssFile.scss : yourCssFile.css
Alternatively you can use an app, like LiveReload to watch the files for you. this'll take a bit of configuration, but it may be a little easier for you if you're only just getting started in the wornderful world of SCSS/SASS
Yopu can use File Watchers in WebStorm to auto-update the CSS file on changing SCSS; but this would also require installing the external SCSS compiler (SASS gem). Please refer to http://www.jetbrains.com/webstorm/webhelp/transpiling-sass-less-and-scss-to-css.html#d104715e458 for more information

Is there a way to pre-define directories for SASS to watch?

I have recently started using SASS in my web development. Thus far, I've found it to be a very useful utility, however I have run into a minor usibility issue.
This website I am working on has SASS files in multiple locations, for example in /css as well as in /blog/css.
Currently, to keep sass watching both directories, I need to create two different terminal tabs and run sass --watch css/:css/ on one, and sass --watch blog/css/:blog/css/ on the other.
It would be awesome if I could make a file or something of the following format:
css/:css/
blog/css/:blog/css/
And then just pass this config file to sass and have it watch both locations. Is this possible?
You could use foreman to run multiple processes:
gem install foreman
Create a Procfile in the root directory and add something along these lines:
sass: sass --watch css/:css/
sass: sass --watch blog/css/:blog/css/
To start both use:
foreman start

Resources