I am using grunt-contrib-watch to compile my LESS files and was wondering if there is an option for line comments like in Compass that says where the selectors were defined? I believe its line_comments in Compass.
Just set dumplinenumbers to 'comments' in your less task setup.
Related
I'm working in very big project and using GruntJS.
For compile sass files i'm using Gruntjs plugins SCSS and watch;
But it is very slow, for one run want 6-7 sec.
well the task is not slow, you need see how many files you are compiling.
e.g.: if you are compiling vendor css like boostrap font-awesome with you sass files of course will make that slow.
I suggest to you insert boostrap and fontawesome calls in your html and remove from your sass compiling
try use this task:
time-grunt
I hope that helped you somehow.
Was wondering if it is possible to lint my sass code on the fly with grunt-sass? Right now, I'm trying to remove ruby altogether from a project and it uses grunt-scss-lint for linting (which uses sass via ruby).
Thanks for any info/pointers.
sass-lint
All Node Sass linter!
A Node-only Sass linter for both sass and scss syntax!
https://www.npmjs.com/package/sass-lint
Note: I never used it. But seems to be what you are looking for.
I downloaded an HTML/CSS template online that has it's own CSS file running on top of Bootstrap. There are also some less files that contains mixins and variables. After I change the less variables, what do I need to do have my CSS automatically change?
Links to tutorials, etc, are appreciated.
You can use watch mode, or something like gulp or grunt (see links). They're task runners that will be able to watch your file tree and run tasks based on different changes. Both are really popular, but they each have a different philosophy/paradigm: grunt is more configuration-over-code, while gulp is more code-over-configuration. It just runs generic node modules and makes great use of the streams implemented in Node to achieve concurrency and more-composable tasks.
To compile Less:
lessc [option option=parameter ...] <source> [destination]
Useful Links:
http://gulpjs.com/
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
http://gruntjs.com/
http://gruntjs.com/getting-started
http://lesscss.org/usage/#using-less-in-the-browser-watch-mode
http://lesscss.org/#using-less (general less usage)
There are good instructions on simple ways to do it here:
http://lesscss.org/#using-less
I'm using sass to compile scss to css.
After each save it take a bout 15-20 seconds until it compile to scss file to css so I need to refresh few times to see the expected results. Is there a way to tell Sass to check for changes more often ?
This is the command I use:
sass --watch sass --watch app/scss/main/:app/css/
I am using Sass 3.3.8 (Maptastic Maple)
Please note that the scss are very short, I just started the project.
There is a performance issue in Sass 3.3. See the related issue on Github.
Sass is ruby based and therefore quite slow, nothing you can do about that. With that said, 15-20 seconds sounds way too slow.
You could try libsass instead, which is much faster.
I jumped into SASS tonight and I'm using Sublime Text 2 with SASS Build and SublimeOnSaveBuild. After much searching, I still cannot find how to specify a different output directory. I basically have a CSS/ directory and a SCSS/ directory which contains all of my SASS files. I want to output to ../CSS. I think it involves modifying the Package Setting file in Sublime. Here is the default preferences file:
{
"filename_filter": "\.(css|js|sass|less|scss)$",
"build_on_save": 1
}
I believe the "build" or "output" path goes there but I'm just not sure. Thanks in advance.
The answer is to change the settings for SASS Build, rather than SublimeOnSaveBuild. SASS Build creates a "Build System" for SASS and SASS Minified. You can go to Preferences -> Browse Packages, open the SASS Build folder, and then edit the two files ending with -build.
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
You can edit the file path there (there isn't a way to do per project yet it seems):
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
Now, how to get them to stop building partials...that's the separate issue that I'm currently trying to find the best way to resolve. EDIT: Stopped it from building partials. Posted a blog about it here.
Perhaps this does not directly answer your question, but I'd like to try.
In my SASS installation (with Compass, however), I have config.rb in my project. In there you can actually specify where the compiled CSS file go.
...
css_dir = "css"
...
If you are not using Compass, my humble suggestion is to have a look at it. It is sort of an extension to SASS (much like jQuery to javascript)
Install 'compass'. Create your next project in the terminal using compass (this is all documented) and the config.rb file will have the appropriate folders/directories and your sass/compass compiler will do everything automatically. You can either use compass watch in the terminal or a programme like LiveReload to do the work for you. In fact, use LiveReload. Honestly, you won't regret it!!!