In the base directory I have main.scss, that should be compiled whenever one of it's dependencies in a subdirectory changes:
/main.scss:
#use "sass:meta";
#use '/sub_1/_incl_1';
#include meta.load-css('/sub_2/_incl_2');
/sub_1/_incl_1.scss
/sub_2/_incl_2.scss
Actually, I have many subdirectories with lots of _<name>.scss files.
Nothing related can be found in the documentation:
https://sass-lang.com/documentation/cli/dart-sass
I tried
sass <base dir>:<target dir> --watch
but it only compiles if main.scss is written. So I am using NirSoft FolderChangesView to watch the whole tree and then fire a one-shot sass on main.scss w/o --watch. I another project I'm using npm sass. But I'd rather do it just with Dart Sass from the Windows command line, if possible.
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/
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.)
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.
I tried:
sass-convert --from scss --to css --recursive app/assets/stylesheets temp
But this only converts css to SASS, and I want the other way around.
Then I looked at the sass command, but it doesn't look like I can pass it a directory.
To do a one-time Sass compile instead of a watch, you can do this from the command line:
sass --update scss:css
To have Sass import one file (usually a partial, with a _ starting the filename), you can do this inside a Sass file:
#import "_base.scss";
This way, Sass knows where you want the include to occur.
By default, Sass can't import an entire directory. The Sass Globbing gem, however, can. You can install it from the command line:
gem install sass-globbing
And then watch with it:
sass -r sass-globbing --watch sass_dir:css_dir
Note that globbing will import files alphabetically, so be sure your CSS will cascade appropriately if this occurs.
Use the sass command followed by the input file name and path, a colon (:) and the desired output file name and path. If the output file does not already exist Sass will generate it. For example,
sass sass/main.scss:css/main.css
However, this is a one-off command that would require being run every time you want to generate a new CSS file. A simpler and handier method is to use Sass's built-in --watch flag. This watches for changes to your Sass file and automatically runs the compile command each time you save changes.
sass --watch sass/main.scss:css/main.css
If you have multiple Sass files within a directory you can watch for changes to any file within that directory:
sass --watch sass:css
Sass also has four CSS output styles available: nested, expanded, compact and compressed. These can be used thus:
sass --watch sass:css --style compressed
Refer to the Sass documentation for more.
to that, simply go your project directory and do this :
sass --update sass-dir:assets/css
with sass-dir the directory containing your actual sass files and assets/css the desired output directory.
Hope this could help.
You can use compass to convert Sass files into CSS.
To initialize the config.rb, try:
compass init --syntax=sass --css-dir=css --javascripts-dir=js
Once you've the configuration file, try:
compass compile
or by specifying the file explicitly: compass compile sass/foo.scss.
To install it, try:
sudo gem update
sudo gem install sass compass
https://sass-lang.com/guide
you can use
sass --watch [input folder path]:[output folder path]
i tried running it in a new terminal and after that sass watches the folder and compiles upon any changes.
you can use this code
sass --watch file.sass:file.css
or
sass --watch folderSass:foldercss
if you want to create css.main you can use this code
sass --watch sass:css --style compressed
I'd like to use Sass with Compass on my static HTML project, but following the instructions does not work. This is what I did:
$ gem install compass
$ cd <myproject>
$ compass install compass .
which was following by awaiting:
directory ./sass/
directory ./stylesheets/
create ./sass/screen.scss
create ./sass/print.scss
create ./sass/ie.scss
create ./stylesheets/screen.css
create ./stylesheets/ie.css
create ./stylesheets/print.css
But when I start watching scss sass --watch sass:stylesheets, I get an error:
error sass/screen.scss (Line 6: File to import not found or unreadable: compass/reset.
This msg coherent with #import "compass/reset";
What do I have to do on my Ubuntu to see that compass imports?
Use compass watch instead of sass --watch sass:stylesheets. If you're using compass, you don't need to bother with sass command. Just use the compass command.
if you really wanted to use sass command i use this code. Considering that you are in your sass directory running the following command.
sass --watch style.scss:../stylesheets/
That simply means that I have created a new file called style.scss and imported the following files within my style.scss. So sass would only watch a single file. In the above command we wishes to have the generated style.css to be in the stylesheet directory.
again its sass --watch style.scss:/path-to-output-directory/
#import "ie";
#import "print";
#import "screen";
so in this process sass is only watching single file style.scss for any changes within sass directory files.
I hope this explains well.