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.
Related
I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one.
Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?
P.S. I'm new to scss/sass/css pre-processor things
You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)
What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.
Is there any way to add syntax highlighting for *.less files in Geany? I found that using *.css syntax higlighting, sugessted somewhere in the internet is not enough for me, and in fact it making bloody mess from any more complicated *.less stylesheet.
I really like Geany, so changing IDE is not an option.
Thanks in advance!
I would suggest you to write your own highlighting.
In this case you should edit file filetype_extensions.conf, create a file filetype.less (see other filetypes for examples, preferably those similar to .less - like .css) and maybe play around with filetype.conf.
On the other hand, if you never work with .css files, you could just edit corresponding configuration files to set up the highlighting you would enjoy.
If this is still not enough, you may have take another editor (with designed highlighting for .less files), see how the highlighting is organised there and then reproduce it with geany.
This may be overcomplicated solution, though I don't insist it's the only one.
On Geany menu: Tools -> Configurations Files -> filetype_extensions.conf
Change:
CSS=*.css;
With:
CSS=*.css;*.scss;*.less;
And your *.less file will be highlighted enough to start to work
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)
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.