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.
Related
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.
Forgive me if this is naive, but I am used to using just CSS. Sass seems pretty cool and I'm down to learn it, but for some reason many of the Javascript or jQuery plugins I'm downloading have both a CSS and SCSS file associated with the stylesheet. I don't want to have to be editing two files to get results on the page, why would both be there when they seem like copies except for a few key areas? See image below, seems like there is an extra CSS file per SCSS. Is that because some browsers cannot compile the SCSS?
CSS and SCSS in same directory
Is that because some browsers cannot compile the SCSS?
Yes. There is a command line utility which converts the .scss to .css. Probably the .map file is a reverse-conversion aid for browser inspectors that understand it.
Whenever I have generated files (like a .min.js, or in your case .css that came from a .scss), I make sure the appropriate command-line conversion tool is executed automatically as part of my build script.
I'm not sure what kind of build system you are using, but there is some command line tool for conversion that will need to be executed.
You are not expected to manually update both formats. SCSS to CSS command-line converters existed long before any browser (is there one yet?) started to support SCSS.
No browser (at least major) is able to directly use SASS (or LESS). You always need to compile scss files to css, before you could use them.
You can compile css by build tools like grunt or gulp. You can even configure it to watch updates in scss files and recompile css if anything was changed.
You could have following types of files after build:
style.scss <- this is source file
style.css <- this is css file created from SASS file
style.min.css <- this is css file minified
style.css.map <- this is source map of scss file
Here you can read why css files are minified. Here you can read what are source maps for.
Prestashop theme folder contains a SASS folder. Where I am having .scss files for my newly developing theme. Am clear in compiling sass to css files locally, but prestashop is not having any inbuilt sass compiler, so does it makes any sense in uploading the sass folder to the server???
it does only make sense if you're using css-maps so you can actually use the scss instead of the compiled css to see the right lines in the inspect-element-console.
otherwise you don't need it.
//Edit might sounded confusing, what i mean is: You can actually see your scss-lines if you're using css-maps (the map needs the source to your scss-file) where all scss-commands you did are linked to the compiled css. if you inspect an element while having this css-map and the scss on the server and all file-directories correct then you'll see the scss-commands instead of the compiled css-commands. it makes developing much easier.
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]".
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.