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]".
Related
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
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 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.
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
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.