I have the following files tree
sass
main.scss
bg
colores.scss
style.scss
www
lib
ionic
scss
bg
ionic.scss
css
bg
ionic.app.min.css
style.css
androidEspecial.css
main.css
I need a file with all application colors. So, I made colores.scss. I need a way to watch changes in that file, and, if it changed, compile more than one scss.
I was wondering if there's a way to watch for sass/bg/colores.scss, and, if it changes, compile sass/main.scss, and also www/lib/ionic/scss/bg/ionic.scss.
I could do that mannualy, but that's not the point.
Is there a way to do so?
You can try using partials.
use _colores.scss
And import this partials in your main.scss
Related
I'm working on a project that my colleagues are also working on, they're working on it in Atom and they have Atom set up so that it works like this:
There's a folder, css, and in that folder is the main file, custom.scss, which imports all other scss files and is compiled in custom.min.css and custom.min.css.map. There are also subfolders with more scss files. Any time any scss file changes in css or any of its subfolders, custom.scss recompiles, but no other scss file recompiles.
Using WebStorm's SCSS File Watcher, can I do this?
My first attempt was to change the scope in the watcher settings, to just watching custom.scss, and that kinda works, but I have to change custom.scss every time I want it recompiled, instead of it recompiling when I change any of the other scss files as well.
My intuition is that I should have the scope set to watching all scss files in the css directory, recursively, and that I should change the Arguments setting in the file watcher to explicitly say compile custom.scss into custom.min.css but I'm not quite sure how to do that
The key setting here is 'Track only root files' -- when that's not set, it tries to compile all watched scss files as they are saved individually, but when it is set, it only compiles a file if it is NOT marked as an include in another file.
Set the scope to watch changes on all scss files: file:assets/css/*.scss
Click 'Track only root files'
Change the arguments to $FileName$:$FileNameWithoutExtension$.min.css --style compressed so that it minifies
Now, when you save a file included in custom.scss, it recompiles only custom.scss (and other root files) into custom.min.css and custom.min.css.map
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
I have a file structure as follows:
all_skins
|— 1
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 2
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 3
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
common_css
| _specificCode.scss
| _otherCode.scss
Inside my scss file for each "skin" I'm importing some general scss partials such as _skinsVariables and _specificCode. The _skinVariables partial changes for each skin, and the _specificCode is a general partial reused in all the scss files located outside the all_skins directory.
The problem is that whenever I make a change in the specificCode partial file, I need to recompile manually each scss file to generate the new css with the modified code.
I'm using PhpStorm's file watcher, so any change to the specific scss file triggers the watcher, but a modification to the included _specificCode (or any included partial) doesn't trigger it.
Is there any way to compile all the scss files inside a parent folder? There are over 30 of these numbered sub-folders, so doing it by hand is time consuming.
Any solution using command line, PhpStorm itself, or other software such as grunt will do for me (least desired).
Edit:
The file.scss would be as follows:
#import "skinVariables";
#import "../../../common_css/specificCode"
To be a bit clearer, the problem is that I have the partials included in all my file.scss, to make life easier most of the code comes from the partials.
When I modify a partial that is imported in all the files, such as _specificCode.scss, I would need all the file.scss to be re-compiled, but this doesn't happen.
The way the watchers seem to work at the moment is that they're triggered only when a modification is done to the file.scss itself, not to the partial that is being included.
Any work around this?
So now you have the file watcher set to watch the open files and in case of modification it should compile ONLY the file itself.
What you need is to set your scss transpiler to compile the /all_skins/1/css/file.scss, /all_skins/2/css/file.scss, etc., but I don't know if the ruby transpiler you're using is capable of this setting.
I solved something similar with http://gulpjs.com (Grunt alternative) with Gulpfile.js config like this (altered to your paths):
gulp.task('styles', function() {
return gulp.src([
'all_skins/**/*.scss'
])
.pipe($.sass())
.pipe($.autoprefixer('last 3 version'));
});
Then set a PhpStorm's file watcher to watch whole all_skins and common_css folder (can be set by "scopes") and run gulp task named "styles" and it should work.
I have this test Wordpress site http://test.fluxmusic.net/ and I have my css and js file working, but I can't find how to make scss files work.
SCSS files must be compiled to css first before enqueuing them. You will need to install a plugin like:
https://wordpress.org/plugins/wp-scss/
Hope this helps
There seem to be a few plugins...and I'm using webstorm file watcher which also precompiles individual files.
I think this may not be the best way to setup a watcher.
I'm running this command now:
sass --no-cache --update --stop-on-error --trace ./app/sass:./app/css
It seems to conflict with the webstorm file watch, which appears to be appending everything to base.css. Can someone tell me what exactly this command is doing vs. a sass filewatcher in webstorm?
What's the best way to work with sass:
precompile my sass to css using a grunt build task
and have file watchers while developing?
My base.sass looks like this:
#charset "UTF-8";
/* DO NOT EDIT FILES IN ./css. See ./sass instead */
#import "page";
#import "modal";
#import "nav";
#import "tables";
#import "forms";
#import "message";
Your command just compiles all files in diretory ./app/sass to CSS and put the resultant files to ./app/css. Default file watcher runs the following command:
sass --no-cache --update $FileName$:$FileNameWithoutExtension$.css
i.e. it takes the current file (the one that has been changed) as input and creates a .css in the same directory. But, as you have 'track only root files' option on (default settings), the watcher creates css for the root file only - the one that reference other files via imports. You can turn this option off to change the current behavior ans get css generated for other files as well.