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.
Related
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
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
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
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
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