Say I've built a .CSS file that I compiled from a .SCSS file.
What happens if one of my team members directly edits the .CSS file, and I come along and recompile a change to the .SCSS file?
How do I stop the direct updates to the CSS file being lost?
You can't.
You must enforce .css files to be only written by scss compiler.
Related
There is currently SASS files in place (mixins, partials, variables etc) however, although these are still in place, a lot of CSS code was manually added to the final compiled CSS file which means the SASS files are not updated and if they were compiled, the manual CSS that was added would be overwritten.
How can I add the manual CSS that was added to the compiled CSS so that it is included as part of my SASS and prevent any overwrites?
I ended up adding the normal css file part of my SASS so it compiled as one file than to overwrite it. I then setup my own SASS structure which new code will go in to.
I was given some files from another developer and was told to make some changes. Within the file structure, there's a .css file and a .css.map file.
I'm relatively new to SASS, but my understanding is that you create a .scss file and use command line: sass --watch style.scss:style.css, which generates the .css.map file and compiles the sass into css.
Is there a way to work backwards with just the .css file and the .css.map file to generate the .scss files, or did the other dev just maybe forget to give me these files?
The CSS is the output of Sass and you cannot generate the original Sass files from the CSS.
As stated by thesassway, source maps (.css.map) seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.
(TL;DR, they are for debugging)
If you were to edit the CSS output files without using SASS to compile them, the next person who writes in the Sass files and compiles them will overwrite your work.
I'm not sure why the other dev will want you to make changes directly to the CSS output files, but asking them for guidance on what that are expecting you to do won't hurt anyone. :)
Yes you can. Using Chrome, inspect something on the page, go to "Sources" tab, go to "Page" tab, expand down to the SCSS files generated from the CSS Map (basically the original SCSS files).
Example below is using WordPress and I was in your situation where all I had was the CSS Map file. Just copy and/or save the files one by one into the appropriate folder. Now you have the SCSS 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.
I am building a set of Sass stylesheets using Compass.
I also have a minified copy of bootstrap.css that I would like to include in my deployed site. However, I'm not sure where to keep it or what to do with it.
If I rename it to bootstrap.scss then Compass will pick it up and compile it. This takes a few seconds and I really don't need to add to the build time.
If I leave it named as bootstrap.css then it gets ignored.
Ideally there would be a flag, or some way of telling compass to simply copy that file across rather than attempt to compile it. Does that exist?
If your CSS file should not be compiled into your finished CSS file, then it should be placed wherever your compiled CSS files go. However, this is generally not the desired behavior: a vanilla CSS #import generates extra HTTP requests.
There isn't really a down side to having your CSS file compiled by Sass, as the compilation of that file should be cached (unless you're deleting your .sass-cache files?). Sass should only recompile a file if it or something it depends on changes.