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!
Related
I'm trying to customize a theme for a Magento 2 website (it was purchased), and for the most part I know where most of the .css calls are coming from. However, there is one sub-menu, I cannot find the source css file for the life of me.
Normally I use Chrome's inspection window to identify the css that is generating the colors/details that I'm looking for, and then search the source files for the same .css reference, and then make the modification as needed.
However, as mentioned I'm struggling to find a specific piece of css code, and I'm wondering if there might be a better way to find what I'm looking for?
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector - Try this one!
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 - this is how you set up your css source mapping by using default developer tools :)
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'm so close to being able to actually start actually using less, but for one final roadblock: I can't get the less files to show up in Chrome Developer Tools. I gotta have my developer tools.
I'm using Codekit to compile the less to CSS and to generate the source map, both of which CK seems to be doing. Chrome is even auto-refreshing when I save less changes. But there is only one css file referenced in the inspector, and that is the master, compiled bootstrap.css file.
At one point I saw the less files in the inspector, but no longer. I have no idea when they stopped showing or why, but I can't seem to get them back. I tried turning on Experimental developer features in Chrome, no dice. I made sure Codekit was generating a source map file in the CSS folder, yes. I even opened the map file, but immediately closed it again. Basically a massive, single line of text that I can't make heads or tails of. No help there.
I saw there was a way of adding the less folder to the Chrome workspace, but from what I can tell this will require me to change my entire folder structure, moving the less folder into the root folder of the site, which will have the cascading effect of me having to remap the file source and destinations in Codekit (for starters), which I'd like to avoid (especially if it doesn't work).
I realize there is little in the way of specific info here, but I'm not sure what else I can provide. I'm hoping there is a key step I'm missing, but two hours of googling keep turning up the same results. Anyone have any suggestions?
Well, looks like I've solved the problem, but still no idea what caused it to begin with.
When Codekit generates the source map, it's also supposed to append a line at the bottom of the target CSS file:
/*# sourceMappingURL=bootstrap.css.map */
I found this missing line in a file I believe I'd mistakenly targeted earlier in this confusing process. I copied and pasted it to the bottom of bootstrap.css (where for some reason, it was not present), and bingo, less files in the dev tools. Now if only I knew what I did to make it go away in the first place... you know, so I don't do it again. Here's hopin'. If you or someone you know sees the error of my ways, I'd be very grateful for any edification on the subject.
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
So chrome auto updates the changes made to the C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. It's great because I can choose my favorite editor and free me from any browser-integrated tools for css manipulation.
But it only works for that specific file. I know it can't be used directly to edit server-side css even when I'm working on a localhost server. But is there any other way I can use this sweet mechanism, perhaps manually telling chrome to look for a specific css file and use that as an alternate Custom.css?
EDIT: Importing doesn't work either i think.. none of these rule seem to have any effect
#import "stylish.1misc.css"; //in the same dir as Custom.css
#import url("stylish.1misc.css");
#import url("http://localhost/.my/stylish.2img.css");
#import url("file:///D:/.localhost/.my/stylish.1misc.css");
related
You can use Chrome Developer Tools to do just that and several other things. Like Also editing and hot swapping Javascript.
There is a plethora of examples you can find by doing a quick search on google or youtube.
Here is an example of hot swapping some CSS on a popular site, making the font-size much larger.
The changes can be saved locally (to the cache folder I suppose) or you can choose to save them somewhere else.
The Changes aren't persistent however, refreshing the page will cause all the changes to be lost, but if you want to make the changes permanent for sites you don't own, you can paste those changes to the Chrome User Stylesheet; or you your own projects you can save your changes locally. For this last case there are plenty of good practices and advice on the links provided above.