I have a directory of .scss files. I am using sass --watch src:public command to watch and compile files, that is working perfectly.
Is there any way to catch whenever there is an error ? Basically instead of going to terminal i want to produce a 'growl notification' whenever there is an error in compiling sass files.
Otherwise a way to detect change in bash output and just create a growl notification of it. It would be really helpful for me.
Yes you can use sass linter like sass lint to catch MOST of them
on top of that you can use IDE plugin as well, for example atom plugin
atom lint error demo
Related
I've tried to write SCSS in my Maven project with React in IDEA. I have sass and sass-loader in npm packages. But I always get a weird error:
Syntax error: missing semicolon
This is a very simple scss example for test. I can't use other tag selectors as well. I've added scss variable on the top to see if it causes an error but it doesn't and all the errors stop at tags. I think that means that scss file is readable after all. And everything is ok when using just css. What's going on?
I solved the problem. Maybe someday it would be useful for somebody.
The point is I missed restarting webpack when changing it. I found configs for sass-loader on its npm page and added it to my webpack.config.js and then run webpack --watch --progress. Everything finally worked
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/
Can anyone please help explain this? I am new at using Sass. But I cant understand why people use compiler for sass files when they can be run through terminal.
I actually had the same question some time ago when I was learning SASS.
I kept wondering why most tutorials involved using GRUNT / GULP or some kind of task runner when there where sass proprietary commands even for live-watching your files with a command such as:
sass --watch app/sass:public/stylesheets
I will quote myself here in the question (that no one answered) just to share my experience with SASS compiling:
Grunt: using grunt-contrib-sass - Everything has worked smoothly; I chose this one over grunt-sass for no particular reason, but I've read that the latter uses libsass(c++) which is faster than the traditional ruby Sass.
Gulp: using gulp:sass - I often encounter an error when watching
files, it doesn´t find some partials, but if you save again,
everything is fine (this is addressed in their common issues -this
solution hasn't worked for me though), also it doesn't generate sass
maps as a default you have to use gulp-sourcemaps on top.
Straight from Console: no task runners - Works fine so far, generates
sourcemaps, and lets you know where there's an error, just like with
Grunt and Gulp.
So after working on different projects using SASS I'd say the reasons are:
Tutorials popularized the use of task runners when using SASS in its early times
In a project, you rarely use SASS just by itself, you most likely want to run other tasks, so it makes sense to add your SASS task to the flow, which saves time and makes sense.
It's easier to run a simple command such as gulp sass or just gulp to run the default gulp task (that should include the sass task) than to remember a long command in which you have to put the paths over and over again.
After a while I realized that you can use NPM scripts in your package.json to run the SASS command line tools like so:
"scripts": {
"sass": "sass --watch app/sass:public/stylesheets --style compressed"
},
And then run it from the command line: npm run sass
the above requires no configuration and you don't have to remember the whole command by heart.
To conclude, there is nothing wrong in using the CMD SASS without other compilers/task runners, just use whatever you feel most comfortable with.
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
Instead of applying an output style when compiling my sass, is there a way of adding the output style (eg :compressed) into the file itself so that it's always compiled with that style?
As far as I know, this is not possible. I would suggest looking into using Compass to compile your sass instead of the default sass command line tool. With Compass, you create a config file (config.rb) that can include a line to specify your output style. Then, you just run the compass watch command, which automatically uses the output style that you specified in your config.
http://compass-style.org/