css - CSS preprocessor with anti-FOUC support

Question

FOUC is a common user experience problem for sites with a lot of CSS (especially after you start combining your CSS files), and the common solution is to separate important layout rules in a small standalone file which is loaded first. That leads to code which is hard to read and maintain because related rules are at very distant places. I am wondering if there is any CSS preprocessor which supports separating code into different files? That is, you would write something like

.main-content { #FOUC
    position: absolute;
    top: 10px;
    left: 15px;
}
.main-content h1 {
    font-weight: bold;
}

and .main-content and .main-content h1 end up in different files. (Or maybe the same on a per-rule level.)