Recover sass files from map and css - css

I'm just thinking if there is any way to recover some *.scss files if we have only css and its map. Ex.: someday someone removed your scss files :) Is it possible? I know that map helps us to debug our css code and show where it is located in scss. It's a lot of information. But is it enought? Any way to do this?
Picture above shows that example: sass folder doesn't exist. But browser know what and where is from source map.

I've used this site before to convert css output back to scss formatting. http://css2sass.herokuapp.com/ Not perfect but its a start.

Related

How to use SCSS with existing site

I have a question about SCSS. I am new at this, so if I'm not providing enough information please let me know so that I can update my question.
I am currently working on a Wordpress installation that has an SCSS directory, with all of the various .scss files.
I tried editing the files directly, and came across a lot of issues. I did some research, and it looks like the scss needs to be compiled into css so that the site can read it. Issue is, no matter how I try, it just simply doesn't work. The site styles break, and the updated code won't work. I know I can change the css directly, but I understand that if the scss is recompiled it will remove my direct css changes.
Any help would be so appreciated.
If you don't have any way to compile the SASS to CSS then an easy way to translate your code is by using sassmeister.

Random custom.css file took over my scss code

My scss code stopped working. I identified the problem - two css files: custom.css.css and custom.css.css.map. I'm not using bootstrap, just ror. How do I make ruby ignore them? Or shouldn't I? The layout looks exactly the same, the code is easier to read (but not neat enough for my liking).
.map files are called source maps and they are used by browsers to display css files. I guess you are using SASS or LESS as you having a .map file generated. You may need to enable source maps in browsers to display the styles correctly. I hope following urls might help you.
Sass source files in Google Chrome
Sass Source Maps + Chrome = Magic

Code in CSS Files is on One Line?

I am collaborating with Senior Developers and quite embarrassed to ask why the code in all the .css files is on one line?! At first I thought it was minified but when I went to unminify it it said Unrecognized format. How do I work with these files? As far as I can see it's ONLY the .css files.
It can be the case they are using a CSS compiler (like SASS or LESS),
in that case the files won't have .css extension but .SASS, .SCSS,
.LESS which will be compiled into a single CSS. - Teknotica
Tecknotica's speculation was correct. So to be more specific this is how you would work with these files given a similar situation. You don't actually write CSS directly into the CSS file but instead add your CSS to a SCSS file that then gets compiled into the CSS file using a tool such as Grunt. The CSS is all on one line in the CSS file (the one you don't directly write to) apparently because it reduces to the number of requests to get the bits. Thanks for everyone's help & advice.
Ew, that's annoying. Usually when I come across that, I just do a search and replace for " ; " and add a break beneath it to help organize everything. Hope that helps!

Do I need to edit scss or css to style my wordpress website?

I am using a wordpress theme and it has both style.css and style.scss. I want to make changes in the styling and I was wondering which file I need to edit? Both, style.css or style.scss?
Thanks in advance.
Information Sass
CSS on its own can be fun, but stylesheets are getting larger, more
complex, and harder to maintain. This is where a preprocessor can
help. Sass lets you use features that don't exist in CSS yet like
variables, nesting, mixins, inheritance and other nifty goodies that
make writing CSS fun again.
Once you start tinkering with Sass, it will take your preprocessed
Sass file and save it out as a normal CSS file that you can use in
your web site.
Answer
You need to edit the style.scss and then generate the style.css.
Once you started using sass oder less you'll never go back to css or regret it!
Learn how to Sass here.
An here is Software to generate the scss/less File.

Do I have to use Compass to modify CSS with Django-Grappelli?

I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)

Resources