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.
Related
I've got the below setup:
Brackets IDE
CodeKit for compiling SASS/SCSS into CSS
CloudMounter to mount a live copy of a Wordpress site via FTP (it also auto updates the server's files with any changes I make to the mounted version).
Here's how it works:
Add SCSS styling into .SCSS file
Save SCSS file
CodeKit auto compiles into CSS file, and stores on Local/mounted drive.
CloudMounter picks up the change and auto uploads it to server where Wordpress site is hosted.
Probably not the most efficient workflow but I'm quite impressed with what I've managed to pull off.
My question is: What happens if one of the other people in my office directly FTPs onto the server and makes an edit to the .CSS file instead of using the above method to add SCSS instead?
Will this break the compiler? When I update the SCSS file in the future, will this overwrite/ignore the new custom CSS?
I'd rather like to keep myself as the only developer who uses SCSS instead of having to train the other people in the office.
DON'T! It will be very hard to maintain what you edited and when you reload the Wordpress site you will lose the edits to the compiled CSS file (pure assumption). If you ABSOLUTELY have to just put the extra CSS you want to add or want your coworkers to add in separate CSS files that AREN'T SCSS/SASS.
SCSS compiles to CSS, that would be like writing software in C++ and then editing the compiled object files or writing software in Java and then editing the byte code. It is just very backwards and not ideal.
By doing what you said you wanted to do you are doing something that is not not advised. SCSS is neat because it allows you to short hand a bunch of stuff and saves you typing and annoying syntax and lets you use variables which plain CSS doesn't allow. Adding plain CSS to a mainly SCSS styled app isn't bad, but I suggest you put all your additional CSS in a separate file so that it is clear what the compiled CSS from SCSS is and what the new CSS you used is.
For the most part SCSS can almost be used Exactly like CSS as far as I know and its worth learning.
I'm new to pre-prossesors and am still trying to figure out the workflow for editing documents created with less. So say I have a template I downloaded off the internet where the css was created with less. So I have : somefile.less, and somefile.css. Say I go make changes to somefile.css, will that then update the corresponding rules in the less file? or how does that work? Also do I need to install some extras to be able to edit the .less file and have it update the css? lastly at what point are the less rules converted to css? is it when the document is delivered to the browser via http or does it happen locally before launch. Thanks.
When using something like LESS or SCSS you don't edit the CSS directly, the CSS is compiled from your less/scss files.
You can either use command line tools to compile the changes, or an application. For example, I use CodeKit for OSX (not-free) which monitors my folders & files and as soon as I save an SCSS file, the CSS files are compiled and my browser dynamically updates the changes automatically.
There are however loads of free solutions, just look up "less comiler [your os]".
Can I get DotLess to parse all my CSS files, (which may or may not include LESS code) instead of having to include .less files in my project? I am using DotNetNuke, and would love to just start adding LESS code to my existing CSS files.
Never tried it but I imagine you could change the type piece in your HTTP handlers.
Instead of path=".LESS" change it to path=".CSS"
Not sure if that would work or break something but it would be interesting to see if it would.
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.
Is there a tool available for converting a manually created CSS file into a nested, well optimized LESS file?
Short answer: No. Do it yourself.
Long answer: Your CSS file should compile automatically with LESS. Rename .css to .less, then you can progressively improve your CSS file by adding LESS code. Yes it may be the slow way, but it is a great way to go.
No. Time to roll up your sleeves and re-create whatever css you have into .less files.
If you are building a framework, I highly suggest looking at this, as it contains many variables and mixins that are helpful for .less files.
Keep in mind that while {less} is awesome, you should not use it for deployment. I suggest using your .less files for development only, and compiling them into minified .css files for deployment/production.