[Feature request] Export SASS variables to CSS variables

Description
 
You’ve shared SASS sources to make writing custom user styles easier. While this is awesome, it works only for the theme kind of user styles. Any user styles which rearrange elements and any user scripts which add new elements would benefit from being able to read the current values, in order to make rearranged and new elements match the rest of the page’s style.
 
Suggestion #1 (simple part)
 
Export common SASS variables to custom CSS properties aka variables so that $background_color: #ffffff !default; in SASS becomes --background-color: #ffffff; in :root in CSS.
 
Suggestion #2 (optional hard part)
 
If you not only export CSS variables but switch to using them when assigning values to normal properties, any theming user styles will be ten times simpler and future-proof. Instead of generating the whole CSS, all they would need is to modify the CSS variables.
 
This can be seen on modern YouTube, for example. To change link text color, all I need is to set :root { --yt-endpoint-color: red !important; }. If a user script adds an element, it can style it by using background: var(--yt-app-background). This makes user styles and user scripts much more reliable, compatible with each other and future-proof.
 
However, CSS variables have only recently been added to Edge, so switching to their usage over SASS variables may be a bit too early, just a future plan if you want to gain the benefits of CSS variables.

CSS variables is something we looked into a while ago, but never actually implemented due to not all relevant browsers supporting them. Also AFAIK you can’t modify colors the same way you can in SASS (lighten, saturate) if using CSS variables. Unless you mean just exporting the pre-compiled values of the variables into css variables, which is possible.

@Luna  
Just exporting all variables to CSS would be a good start.
 
For example, my user style merges top menus in the header, but can’t get the colors of the menus, so works correctly only in the default light theme. A similar problem with my user script (unpublished yet) which adds subheaders to thumbnails (JS can get computed CSS colors, I admit, but it’s more code).  

 
As for color modification, there’re no functions similar to what exist in popular CSS preprocessors, but there’s a somewhat unorthodox way which I’m currently using in user styles (AO3 style, for example). It involves specifying colors through HSL values, modifying individual components, and using calc function to get the final values. Looks verbose and theming isn’t 100% flexible as HSL color space is uneven in different hues, but works. :)
 
Looks like the people designing the CSS standard went crazy when asked for those lighten and darken functions and are proposing some crazy color modification functions (similar to transform property functions) and even crazier color spaces in new CSS Color 4. It’s an early Working Draft currently, so unless you switch from SASS to something like PostCSS, no luck with using it (and it’ll function as preprocessor, so no real benefits).

@IAmAPony  
I’ll export all SCSS variables into CSS vars with the same names and set their values to the evaluated values of SCSS vars.  
We will maybe switch to using those on the site in the future, but I can’t say anything more specific at this time.

@Luna  
You act like it’s a secret decision full of red tape :p
 
The reality is that we just don’t like browser support as is, so we’re waiting for people to update to more current ones that support the standard.

@byte[]  
Shit byte, stop disclosing state secrets! Or I will be forced to give you the Siberia badge!

Here are some variables
 
https://gist.github.com/anonymous/89425281c7fa5845763d3b8254cbe6cf
 
You might be able to find & replace these in the source code

@IAmAPony  
A few days ago to body tag was added attribute data-theme with the name of theme. So, you may add style for dark theme by selector body[data-theme*=dark]

StSyaN  
Yes, I noticed this yesterday while trying to figure out how to differentiate between logged in and logged out states in CSS. :) Need to fix the style. (Haven’t found a clean way to detect logged out state, by the way, so a similar attribute would be appreciated.)
 
It won’t work with external non-standard themes. However, not sure how popular they are, considering damn UserStyles.org doesn’t accept DerpiBooru styles and there’re no alternative websites besides Gist and the like (.user.css convention only being supported in Stylus doesn’t help).