I've been trying to disable auto-formatting on save for vs code and have had no luck. I have just started using it and use no extensions.
I've tried adding the setting:
"editor.formatOnSave": false
To no avail.
It continues to take my perfectly formatted css and strip all the whitespace and stick it on one line.
Any suggestions would be appreciated. I just want it to save the file as I have written it.
This sounds like your css is being minified when you save the file. As a formatter would not place all the css on one line.
Are you using a build process? eg: gulp, grunt, sass, less, etc..
Related
I'm using Codekit to minify all my CSS via Sass. This works great but causes an issue when inspecting the code as everything appears on line 1! I use the lines as a quick way to find the code I'm looking for.
I use the Codekit plugin for Coda, which means every time I make a change to a .scss file and save, it just auto compiles the code.
I guess everyone will tell me not to compile the code until launch, in an ideal world that's great but there will ALWAYS be a need to inspect the code without once it's all been compiled.
Is there a way around this? Or is this a downside of compiled code? What processes do people go through to get to the minified code? How can I tell which .scss the change is in?
I could set it to be less compressed so it's not all on one line but I would then lose the benefits of compressing it.
These are the settings I have Codekit set to:
Codekit supports Source Maps, which will let Google Chrome show you the original code even after minification.
In your compilation settings, check the Create a source map box for SASS.
For more information, check out this Team Treehouse article (the article deals with JavaScript, but the same principle applies to CSS too) and the Codekit SASS documentation.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)
Do you know any tool for reading minified css?
I've tried W3C css validator, but it's hard to read if there are many errors.
Does http://procssor.com/ work for you?
Try using some IDE, like WebStorm, NetBeans, etc. They may help you in finding the errors.
NetBeans has also a feature of formatting the code, so that the code comes back to original form.
Try Pretty Printer
It works for PHP, Java, C++, C, Perl, JavaScript, and CSS. There are a bunch of options for when to add new line breaks and when not to. Works pretty well. One problem is that the output code isn't in it's own box, so you can't Select All to grab it all at once easily.
Or have a look at
Format CSS Online
More full featured beautifier for CSS exclusively. Has the ability to output as a file so you don't have to worry about copying and pasting at all.
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.
I'm using lesscss, the 'framework/compiler' for css. My IDE, dreamweaver, does not recognize .less as CSS. So no niceties such as error checking or code completion there. Is there anything I can do about that?
Dreamweaver can be configured to recognize "new" filetypes and treat them as editable under preferences. You can also edit some config files to help DreamWeaver figure out how to treat the files so it does code highlighting, etc., though in my experience, it does not always work as you would expect. On the other hand, can lesscss be configured to output .css files?
Here's an Adobe article on getting Dreamweaver to add new file types.
http://kb2.adobe.com/cps/164/tn_16410.html
less syntax highlighter extention
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#
You can force DW to "recognize the files" although not parsing as far as I know. This might be of help : http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/ that might be of help
Try giving the extension: less.css, to your css file.
Example: styles.less.css.
This worked for me, but I still need a base stylesheet, such as: styles.css.
Also,
You can compile .less files to .css directly from within Dreamweaver using a free (Donation-ware) plugin:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522
Dreamweaver has a very hard time with LESS, in my experience. It doesn't properly handle nesting and will color those as though they are syntax errors. However, it is mostly workable since the auto-complete does at least still work, and the overall coloring is okay on everything except nested items. (at least for me)
Also the extensions that are referenced above do not work on mac.
If you are having trouble getting DW to be able to open and color code LESS at all, try this--
1) Change some DW config files:
For Mac users, there are TWO configuration folders (at least for DW5.5). Two sets of identical files, FOUR in total files, have to be changed:
~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml
~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Extensions.txt
and -
Adobe Dreamweaver CS5.5/Configuration/DocumentTypes/MMDocumentTypes.xml
Adobe Dreamweaver CS5.5/Configuration/Extensions.txt
And this technote tells you what exactly to change in those files:
http://helpx.adobe.com/dreamweaver/kb/change-add-recognized-file-extensions.html
Install a LESS Compiler
and for those on mac, this little app works GREAT. All it does is watch your less files and automatically save them to css on save.
http://incident57.com/less/
I hope that is helpful to someone!
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#
This actually does all that and more, as CSS and less have a little different syntax specially when it comes to nesting rules inside one another.