I find very convenient to edit a CSS from Chrome, and then saving my edits directly.
But then I need a way to take this changes back to SASS by hand, and I think that may be there is a tool to do this more easily.
I understand that it is difficult to have a tool that automatically does that, but may be there is some tool that can at least do a comparison between the SASS file and the CSS file (like a diff) and let me see the SASS in the right pane and the CSS in the left pane, in a synchronized view ?
Sass Sleuth is a tool that will solve this problem for you.
Alternatively you could use FireSass for Firefox, or Sass Inspector for Chrome.
You might want to try this nifty online service which does just that: https://css2sass.heroku.com/ or the code: https://github.com/jpablobr/css2sass
Related
I have CSS file with a lot of unused CSS lines.
And I want to clean CSS file but not manually.
In browser developer tools I can see (unused/used) CSS but I can't clean file and copy just used CSS.
enter image description here
I think a CSS minifier tool is what you're looking for. There are online tools to help with this. Check out this other answer to see some options. I would recommend using this after you are done with development, otherwise it might make it harder to read.
The question doesn't explain the whole situation. I'm aware of the Workspaces and of SASS source-maps. I'm already able- from the Styles panel- to track the line in the scss file where the specific rule is that I want to change.
That in itself is already a huge achievement, but what would improve a lot my workflow would be being able to visualize the changes as I'm making them live, and have DevTools save them automatically. That way I could instantly adjust elements.
That already can be done in plain CSS. In fact, DevTools is already changing the css file instantly even with SASS running. The problem is that as soon as you modify the scss file again, SASS will recompile and the change in the css file that DevTools made will be lost.
An image is worth more than 1000 words, so:
I'm changing the left property of the red div instantly with my arrow keys. I'm visualizing the changes also instantly. No need to make changes manually, press Ctrl+S, see how the element looks, readjust, save again, etc.
I know I want to change the left property so I click on the scss file and make the change in the Sources panel. Then I save the changes and see how they look. But I can't visualize them instantly as in plain CSS.
Is there any way to do what is already instantly done with css files in the Styles panel but with scss files?
It doesn't have to be done necessarily inside DevTools. Maybe there's an option for SASS to watch for changes in reverse (not only from scss to css).
I was looking for an answer in both directions but to no avail. Any help?
Unfortunately I don't think there's a good answer to your question. There are some ways to convert CSS to SCSS, but they're not intended to be an ongoing process, just a one time conversion.
It's best to only have the conversion one way, if it were bidirectional there'd be a lot of 'what if' situations with collisions that would get really hairy. It isn't a feature I'd want to try to figure out :P
In my workflow, I make small adjustments in the styles inspector (like you are above) and when I'm happy I copy those values to my SCSS file and recompile/reload the page. I think it's about as good as it gets without getting into really strange (probably) unexplored territory.
Small note: Chrome isn't actually editing the CSS file when you change it in the style inspector, it's just making adjustments to the DOM temporarily as if the changes were made where you made them. That's why it's lost on reload.
DevTools has an experimental feature called Live Sass
If you enable the "live sass" experiment, you can edit Sass code in the Sources Panel and see results instantly, I've made a gif of how this works here: https://umaar.com/dev-tips/103-live-sass/
The catch is: since it's experimental, it might not work as expected!
i have made a webpage and now it is "feature-complete".
As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing?
What are other people, using Play framework (or other templating systems) doing?
Thank you!
Maybe you can download an extension that automatically refresh's your page every ... seconds. On this way you only have to "Alt-tab" between your code and your page.
BTW: I couldn't comment this, I need 50 reputation. Otherwise I wouldn't have commented it because this isn't really an answer but this is just my advice.
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html