I think I know the answer, but just to verify. Does the IncludePaths option in gulp-sass need to be a path with all scss files, or does that directive looks for only scss files in that folder and ignore other files. I ask because I have a bower package with a scss file that needs compiling, but the .scss file is in the main directory and not its own separate sub-directory.
It does not need to be in a subdirectory with only SCSS files, and other files in the directory will be ignored.
Related
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've added a new .scss file to my components directory in Zen. Compass sees the file, because I get the message 'file modified' but I do not get a .css file generated
I'm new to compass and sass. Do I need to map files somewhere?
I found my answer. I needed to include the new scss in my styles.scss file.
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 want to compile all the scss to css in my part folder . how to do it ?
the compass watch command can only compile the root sass folder to css folder.
for example: I want to compile top_menu.scss to top_menu.css.
config.rb
sass
css
part
top_menu
|--top_menu.php
|--sass
| |--top_menu.scss
|--css
| |--top_menu.css
Try this executing the compass watch command as it follows
compass watch --sass-dir part/top_menu/sass --css-dir part/top_menu/css -c config.rb
I hope it helps.
Cheers!
You should move the part folder inside the sass folder and set config.rb to watch the sass folder:
sass_dir = 'sass'
UPD1: if you want to keep the structure, try pointing sass_dir at the root folder. Another option is to make those files partials that would embed into one big css file instead of multiple smaller ones.
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.