基于使用过的sass mixin将来自scss源的css代码拆分为多个css文件

我需要用不同的“口味”或颜色变体来编写html5模板

我想有一个scss文件的工作，但几个css文件被渲染

假设我的scss入口点是app.scss

理想的方法应该是：

$flavors: (
    flavor-a: (
        background: white
    ),
    flavor-b: (
        background: grey
    )
);

@mixin flavor($name) {
    /* parser-rule-start */
    @content;
    /* parser-rule-end */
}

html {
    /* regular rule - valid for all flavors => goes to app.css */
    font-family: sans-serif;
    @each $name, $options in $flavors {
        @include flavor($name) {
            /* flavor-rule => goes to flavor-a.css / flavor-b.css */
            background: map-get($options, 'background');
        }
    }
}

所以我最终得到了

• app.css
• 风味a.css
• 风味b.css

我以前有过这个需求，并用多条目文件解决了它，这些文件调用mixin进行着色等等

但是我不喜欢这种方法，因为在我为一个新组件编写了SCS之后，我需要将行块从结构文件移动到flavor mixin，即在flavor-*.scss条目文件中调用的

我的身材看起来像（吞咽）：

/**
*编译/concat-scss
*/
吞咽任务（'css'，函数（）{
常数sassOptions={
outputStyle:“压缩”，
errorLogToConsole:true
};
常量自动引用器选项={
浏览者：[
“最后两个版本”，
“ie>=11”
]
};
回灌
.src（“src/scss/*.scss”）
.pipe（sourcemaps.init（））
.pipe（sass（sassOptions）.on（'error'，makeErrorLogger（'css'））
.pipe（自动刷新器（自动刷新器选项））
//.pipe（splitFlavors（））更新3

又一次采用替代品

let newSelector=selector.replace（/\s？\：\：flavor\-（[^\s]+）/g，”）.trim（）；

更新2

需要采用css规则选择器中的替换

let newSelector=selector.replace（/\s？\：\：flavor\（[a-zA-Z0-9\-\\us]+）/g，”）.trim（）；

更新

通过使用修改的选择器而不是属性，您可以在“for flavor”块中继续使用嵌套规则

因此，将mixin调整为如下所示：

@mixin for-flavor($name) {
  ::flavor-#{$name} & {
    @content;
  }
}

而吞咽任务：

const path=require（“路径”）；
const gulp=需要（“gulp”）；
const sourcemaps=require（“gulp sourcemaps”）；
const sass=需要（“吞咽sass”）；
const autoprefixer=require（“吞咽自动再充装器”）；
const-through=require（“through2”）；
const postsss=需要（“吞咽postsss”）；
/**
*编译/concat-scss
*/
吞咽任务（'css'，函数（）{
常数sassOptions={
outputStyle:“压缩”，
errorLogToConsole:true
};
常量自动引用器选项={
浏览者：[
“最后两个版本”，
“ie>=11”
]
};
函数addFlavorFiles（）{
通过.obj（函数（文件、编码、回调）返回{
/*@var文件*/
让content=file.contents.toString（）；
让名称=[]；
让matches=content.match（/\：\：flavor\-（[^\s\{]+）/g）；
如果（匹配）{
names=matches.map（match=>match.replace（/\：\：flavor\-/，''）.trim（）；
//独特的
名称=名称。过滤器（（el、索引、arr）=>{
返回指数===arr.indexOf（el）；
});
}
name.forEach（name=>{
让newFile=file.clone（）；
newFile.contents=Buffer.concat（[Buffer.from（`/*！flavor:${name}*/\n`，encoding），file.contents]）；
让filePath=path.parse（file.path）；
newFile.path=path.join（filePath.dir，`flavor-${name+filePath.ext}`）；
this.push（newFile）；
});
回调（空，文件）；
})
}
函数filterFlavors（css、opts）{
设flavor=null；
if（css.nodes[0].type==“comment”&&css.nodes[0].text.indexOf（“！flavor:”）==0）{
flavor=css.nodes[0]。text.replace（/^\！flavor\：/，“”）。trim（）；
}
css.walkRules（规则=>{
让选择器=rule.selector；
如果（/^\：\：味道\-/.test（选择器））{
//风味法则
if（flavor==null）{
//常规文件，所有味道规则必须。。。
rule.remove（）；
}否则{
让matches=selector.match（/\：\：flavor\（[a-zA-Z0-9\-\ \ \ \ \+）/）；
让currentFlavor=matches[1]；
如果（味道！==currentFlavor）{
//味道不对
rule.remove（）；
}否则{
//保持规则，但调整选择器
让newSelector=selector.replace（/^\：\：flavor\-（[a-zA-Z0-9\-\\\+）/，“”）。trim（）；
rule.selector=newSelector；
}
}
}else if（味道！==null）{
//常规规则，但味道文件，因此删除该规则
rule.remove（）；
}
});
css.walkRules（规则=>{
如果（！rule.nodes | | rule.nodes.length==0）{
rule.remove（）；
}
});
css.walkAtRules（atRule=>{
如果（！atRule.nodes | | atRule.nodes.length==0）{
atRule.remove（）；
}
});
//可选：从flavor文件中删除所有字体面定义
如果（味道！==null）{
css.walkAtRules（atRule=>{
如果（atRule.name==“字体面”）{
atRule.remove（）；
}
});
}
}
回灌
.src（“src/scss/*.scss”）
.pipe（sourcemaps.init（））
.pipe（sass（sassOptions）.on（'error'，makeErrorLogger（'css'））
.pipe（addFlavorFiles（））
.pipe（自动刷新器（自动刷新器选项））
.管道（邮政编码（[filterFlavors]））
.pipe（sourcemaps.write（'.'））
.管道（吞咽目标（“公共/静态/css”））
});


原创帖子

我想办法解决了

使用sass mixin，添加解析规则：

@mixin for-flavor($name) {
  -flavor-start: unquote($name);
  @content;
  -flavor-end: unquote($name);
}

在css声明中使用它

// you get the idea...
$flavors: (
  "lightblue": (
    background: lightblue,
  ),
  "pink": (
    background: pink,
  ),
  "dark": (
    background: black
  ),
);

#page-header {
  background: black;
  @each $name, $options in $flavors {
    @if map_has_key($options, 'background') {
      @include for-flavor($name) {
        background: map_get($options, 'background');
      }
    }
  }
  @include for-flavor("lightblue") {
    /* special rule for specific flavor */
    color: black;
  }
}

吞咽

const path=require(