I'm really confused about LESS, which is still new to me. Bootstrap uses it, and I can see references to it in Chrome's style inspector, making references to a grid-framework.less file, but when I go looking on the hard drive for it in my project, it's not there. How is that even possible? When I did a grep followed by cut command to find which file was referencing grid-framework.less, I found it was in two files: bootstrap/css/bootstrap.min.css.map and bootstrap/css/bootstrap.css.map. And there, as well, I have no idea what .map files are either. I have much to learn.
So, in general, please explain what .map files are, and then explain how these load the .less file, and then explain how .less files are loaded in the browser, and how far back do browsers go before they won't process .less stuff from Bootstrap 3?
Related
I am having trouble finding information on this "normalize.less" thing I'm seeing in the Chrome 76 developer console. At the same spot in Firefox 69's console, it instead shows bootstrap.min.css so I'm guessing it's part of bootstrap, at least in my case. What is it though?
When I hover over it in Chrome, it pops up a filepath pointing to localhost/css/less/normalize.less but I don't have any folders under css, let alone one named less.
I've tried Googling "localhost css less" and "normalize.less" but am mostly finding various GitHub projects I'm not using and a few questions on here asking why less.css isn't working. I have no reason to think it's broken or getting in my way, I just have no idea what it is.
Also, to be clear, any mention here of normalize.css or less.css are from the search results I've seen. I'm focusing on normalize.less. (...they're not somehow the same thing or anything, are they?)
For the purpose of finding/seeing this reference to normalize.less:
What is it, and why did Chrome point me to an apparently non-existent file and folder? (bug?) Is there any relation between normalize.less, normalize.css, and less.css? Heck, what are .less files in general?
This is because the location of the bootstrap CSS file also has a .map file.
This file is used to indicate to the developer which file and which line is the attribute he wants to change, since the bootstrap.min.css file is nothing more than a large compilation of dozens of files.
please excuse my inexperience with, and lack of understanding of, Sass.
Basically I was assigned to do some edits on a site which has a main css page and a few scss subpages, all organized through an ftp directory.
I'm just confused how the index knows where to pull the scss pages in the ftp directory? I've looked through the code for the index page, as well as the linked css and js pages, and can't find any part that references the scss pages. Yet they still load within the original css? Am I missing something?
Thanks for the clarification.
SCSS is a preprocessor language. That means it will be converted to CSS. The SCSS files do not get loaded by the website. Instead you will have to make your changes to the SCSS files and then convert them to CSS. It is likely that there is a system in place which takes care of that for you. Take a look around and find out whether there is a gulpfile or a gruntfile hanging out somewhere.
The main.scss file gets compiled to the main.css file. The output produced by the sass compiler replaces the main.css file. There is no link. You need to compile your main.scss file using sass.
Apart from that, you use 'CSS file' rather than 'CSS page' as CSS is an acronym for cascading style sheet which is definitely not page in itself.
Web browsers don't know what a SCSS or SASS file is. They only load CSS.
Your site could have a build tool (grunt, gulp, rake etc) to compile your .scss source files into .css files, which is then published to your web site.
Sometimes your application server will know how to do the translation on the fly and you can just edit the .scss file.
A lot of the time many .scss files will be combined into one .css file so you are often editing a different file to what you would expect when you look at what .css is loaded the browser.
Can PhpStorm hide generated CSS files under the LESS file?
Here is a screenshot of a WordPress theme:
I've found myself opening the .css file instead of the .less one on numerous occasions. Is there some way to group these files together so I never see the .css file? A bit like a closed folder, have to click the arrow to view generated file?
(I remember seeing a similar feature somewhere, not sure if it was in PhpStorm or another editor)
I did have LESS files in their own folder, but I still found myself opening the .css file from time to time by accident. It would be good to hide them completely.
Thanks!
Never mind, it seems to be (kinda?) working:
style.less nests style.css correctly, not sure why the others are not showing.
It is called File Nesting and it’s available from the gear icon in the Project browser.
By default SASS looks at the filename and determines whether to make a css file out of it. I'm wondering if there is a way to prevent this from happening.
We're building a large website and lots of front-end developers are editing the css, but we only have one dev server. Sure some things you can see happen locally, but often you can only see the real rendered way on the server.
So, when I push my compiled css file to the server, my co-workers' css gets clobbered until s/he commits and I do an svn:update, etc, etc.
However, if we were working in different SASS file, and those css files were getting created, I would only have to push up, say, the forms.css file instead of the whole thing.
Then for Production, we'd put it back to the way SASS normally works.
The only other way I can figure to do this is to do a mass rename of files, which seem very messy.
Thanks in advance.
The entire point of partials is that they don't get compiled into files. If you want a sass file to be turned into a css file, remove the underscore.
Your real problem seems the be that you're putting compiled CSS in your version control. Don't do that. Only commit Sass, and compile it into CSS server-side with a post-receive hook or something.
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.