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.
Related
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 :)
I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
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.
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.
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.