Suggestion: Space to enter predetermined variables?

[mwilday]

It would be fantastic to allow a settings location for pre-determining variables for SASS. I do theming for several websites where i use the same variables, to be able to have those readily available before I start tweaking code would be a HUGE timesaver. Just a thought. Thanks for a great product!

[webextensions]

@mwilday
I believe your issue is that the variables are defined in one sass file and you wish to use them in another sass file and the code you write in Magic CSS editor doesn't understand those variables due to which your changes are not getting applied.

I believe that problem would get indirectly solved when live editing real css/less/sass files gets implemented. Reference: "Add support for editing and saving the CSS/Less/Sass files" (https://github.com/webextensions/live-css-editor/blob/master/TODO.md#new-features)

[mwilday]

Possibly, but I am editing SASS on a Moodle LMS theme and I don't have direct or editable access to the sheet itself. I am having to use a code editor window which compiles my code into the system. I'd like to be able to set up a set of variables that I can expect to use anytime i use the magic CSS editor and then just enter my variables without having to add them to the top of my edits. Does that make sense? I'd like them hard-coded in (so to speak) based on an option window or something so anytime I edit code on a page the editor will reference my variables. For instance, our university has several colors that we use regularly. Rather than remember or reference the color code, I'd prefer to just be able to load css magic, which references my default variables $blue = #xxxxxx $green: #xxxxxx and then just type in my color variable and see the changes in the colors I've predefined.
Does that make sense?

[webextensions]

@mwilday
Your suggested solution would probably work well for your use case, by having some sort of global setting which contains the value to prepend.

Can you provide a little more detailed step-by-step workflow you follow? I wish to understand your use case a little more to identify the pain points, abilities and limitations of your workflow.

Not promising a quick final solution :-)
But, I might be able to provide a workaround bookmarklet code for your scenario while an acceptable solution is not integrated to Magic CSS. (Please mention your browser as well)

[webextensions]

Probably not relevant in your case, but let me write the basic workflow for the upcoming live file editing feature:

• Load Magic CSS editor
• Activate "live file editing" mode + "watch for changes" mode (The UI for this is not finalized yet)
• Start a Node JS based back-end server (https://www.npmjs.com/package/@webextensions/live-css)
• Back-end server and Magic CSS establish connection
• Now the developer can edit the CSS/Less/Sass file directly in the browser and the changes would be saved in the filesystem
• For some projects, there CSS/Less/Sass files would get pre-processed and generate an output CSS file on filesystem
• The CSS file from one of the previous 2 steps (which would have been part of the page as a <link> tag) would get automatically refreshed in the active tab

[mwilday]

Sure... One of the sites I am responsible for is course.uc.apu.edu, soon to be course.lapu.edu. When i am troubleshooting CSS or display issues or working on themes in a course I will:

1. load up a course page
2. open the css editor
3. begin troubleshooting CSS
4. If my code is successful I then have to go to an admin settings page which contains a field for my SASS code and i have to add the css there.
5. After pasting my code I would then apply the color variables.

Having prepended values would allow me to use variables for more than just colors. I have variables for borders for our themes, and such. When I troubleshoot with a live editor I always have to type in the variables first, or type in the full code. My end result would be much cleaner if I could just troubleshoot using the variables I use already! This would be a splendid option. Let me know if you have any other questions.

[webextensions]

@mwilday
I am assuming you would be having a single block of code which would be declaring Sass variables in your code.

Magic CSS remembers the code you type there for the next reload and it is applicable for all webpages for a given domain name. So, what is/are the reasons due to which you don't want to copy-paste that Sass variables code into Magic CSS editor and make your fixes at the bottom of the editor?

• You wish to avoid that clutter in the editor?
• Those Sass variables change often?
• It is not just Sass variables but some more stuff that you need to reuse?
• You work on various sites and you wish to avoid copy-pasting?
• You work on various sites and often switch browsers/computers?
• You often use private browsing mode due to which Magic CSS editor doesn't remember code?

[mwilday]

That is really useful! I have to say I didn't realize the code loaded for every page you load within the domain. That is helpful, but there are several reasons from your list that would I would say affect my reason for having a pre-pended list.

• The variables up-top do clutter the window and cause me to have to scroll beneath them to start working on the CSS
• I do work on several different sites and it would be great to not have to sync the same variables over and over when something changes for one site.
• I do you use private browsing for testing css and having to copy and paste the variables becomes cumbersome.
• When I make edits in the css editor it would be easier to Copy and Paste all the code rather than have to select everything below the variables. Having the variables prepended when it loads would mean I could just start right on the css and then quickly copy and paste add my changes to the compiled sheet.

[webextensions]

@mwilday
I gave it some thought, but couldn't come up with any solution which would be simple enough to implement and/or would be simple enough for the users to understand (and not get confused with the additional UI).

I believe that for users editing the real files, a major part of this issue would get solved with the live editing and saving task mentioned in https://github.com/webextensions/live-css-editor/blob/master/TODO.md#new-features

Unfortunately, your use case (where you don't work with files directly) is rare which may not fit well with the limited scope of this extension.

I would prefer to mark it closed as a Won't Do.