I was wondering if there is anyway to compile a scss file to css and inside the css file are comments that tell you what changed in the scss.
It might look something like this:
/* line 9, ../sass/foundation/components/_global.scss */
html,{}
I just recently started working with sass and the person previously who did the sass compiling used compass. I read somewhere that it involves the config.rb but I can't find this file. Can anyone help?
According to the Sass Reference, the correct option is :line_numbers – you want to set that to true. That will generate comments with the format in your question.
How to set that option that depends on how you are compiling your Sass. Installing Compass would set up a configuration file config.rb in which you could write line_numbers = true. If you're just using the sass command-line tool, there is a command-line switch to enable the option, according to sass --help. You can use the command sass --line-numbers to compile with that option enabled.
Related
I am trying to move away from WebStorm and trying to configure VS Code to get few functionalities of WebStorm. I am trying to implement File Watcher functionality in VS Code.
I used to have File Watchers for Jade and Stylus in WebStorm. I already have gulp tasks for them and have added them in tasks.json as well. I have even provided keybindings for them too. But I have to run them manually. What I want is, whenever a file is saved, it checks whether it is a Jade file or a Stylus file and then run the appropriate task to generate either HTML or CSS file.
Is it possible to do it in VS Code yet? If yes, then how can I do that?
You must create an extension to accomplish your scenario. You said you already have gulp and task.json with your automation, so I think it would be relatively easy to translate that to an extension.
You should take care with this points when creating your extension
package.json
You extension should work for Jade or Stylus, so the package.json file should have:
"activationEvents": [
"onLanguage:Jade",
"onLanguage:Stylus"
]
OnSave Event
There are two events that you could use to detect file saving: onDidSaveTextDocument or onWillSaveTextDocument, depending on your needs.
FileWatcher
VSCode has a built in FileWatcher, you just have to create it via vscode.workspace.createFileSystemWatcher. The point is that it just monitors files within the opened folder/project.
If you need to detect changes outside, you should use fs.watchFile or chokidar.
Publishing/Installing
Don't worry if you think your extension only works for you or you can't publish on marketplace, for any reason, because you can create your own extensions, package them and install locally.
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
So i'm using brand new PHPStorm 7, which is supposed to have full Compass support, with syntax highlighting and stuff.
I successfully install compass to my project directory, PHPStorm offers me to use compass sass watcher, automatically finds compass.bat and my config.rb .
And then, nothing happens - my #import "compass" still triggers unable to resolve import from watcher, i don't get any code completion or search features. The only solution i know was an old trick of adding compass stylesheets directory as a resource root to my project.
So what i'm asking - is this the way it's supposed to be, or am i doing anything wrong, because i don't think manually importing a library into every project is a proper way for supposed library support.
After all, there is an issue on Windows.
There's the solution, and it works. Thanks LazyOne.
http://youtrack.jetbrains.com/issue/WEB-9139
I am making use of System.Web.Optimizations BundleConfig in my project. I'm running into an issue with a specific jQuery plugin that I'm using on my site. If I add the file to my ScriptBundle it works fine in Debug mode but throws JavaScript errors when I am in Release mode (i.e. set Web.config debug=false). I'm thinking something isn't getting minified correctly.
All others scripts are not giving me any problems so I don't want to affect behavior for all bundles but is there a way to customize for a specific bundle to tell it to use a specific version in debug and the min version in release.
I know the default behavior is for it to look for .min files but I just can't seem to get this to work. Can anyone tell me what I may be missing here? Thanks for your help.
Here is example I split it out by self. This works in debug but not when i set debug=false in web.config
ScriptBundle layoutBundle = new ScriptBundle("~/jsbundles/jquery/layout");
layoutBundle.Include("~/Scripts/plugins/jquery.layout-latest.js");
bundles.Add(layoutBundle);
If you just want to turn off minification for one bundle, you can simply switch to a normal Bundle instead of a ScriptBundle and it won't be minified. Then it will serve that bundle in whatever form that you included without running it through minification.
I'm currently playing with Rails 3.1 RC4, and when I try to generate a scaffold:
rails generate scaffold animal
I notice that it creates a CSS file in:
app/assets/stylesheets/animals.css
I was expecting it to generate an animals.scss instead.
Am I missing something?
PS: I got Haml to generate correctly following the instruction from here.
On May 24, 2011, SCSS generators were moved out from Rails, and put into Sass Railtie.
See this commit.
This means in your application, you need to include sass-rails gem in your Gemfile to get the generator working correctly. In other words, it's not enough to simply include sass gem to get the generator working.
When SCSS is finally generated, your stylesheet will look something like mystylesheet.css.scss.
By default, SCSS is used.