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.
Related
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?
I have been handed over a website that uses LESS to pre-process CSS. I need to update some styles, but I'm not sure if the previous developers had been modifying LESS files and then compiling the CSS, or if they lazily had just been editing the CSS directly.
I want to edit the LESS but I'm worried that I'll lose any changes the previous devs made to the CSS directly.
I don't know who the previous developers were or have access to their source control to see the file history.
Is there any way to check if the LESS file is in sync with the CSS file?
There is no way to reproduce LESS file from CSS file.
Try to keep a copy of the CSS file and try to compile again. Then compare the two CSS files.
A person directly edited the css output file. Am I in trouble here? He made edits all throughout the file and if I'm understanding correctly, my changes will overwrite his when I recompile. Is there anyway to keep everything but still work in my scss files? Could I take the entire css file and try the reverse css to scss path to get everything together?
One option would be to save the edited CSS file and then compare it to your compiled CSS file, allowing you to determine what the changes are and add them to your Sass file.
Save the edited CSS file as FileA.css.
Recompile your Sass file into FileB.css
Load files FileA.css and FileB.css into a diff viewer, something like DiffChecker or a desktop app like Kaleidoscope.
Determine the changes and add the appropriate Sass to your original .sass file.
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.
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.