是否可以将特定 CSS 属性从一个 CSS 文件提取到另一个？答案

【问题标题】：Is it possible to extract specific CSS property from one css file to another?是否可以将特定 CSS 属性从一个 CSS 文件提取到另一个？
【发布时间】：2019-08-21 14:57:17
【问题描述】：

我想知道，有没有什么方法可以从一个 CSS 文件中排除或提取某些特定的 CSS 属性到另一个？

例如，我有一个 style.css 文件，我只想从中提取所有背景和颜色属性到另一个 CSS 文件。有没有可能？

TIA

【问题讨论】：

是的，您可以将它们设为变量并将它们包含在最终的 css 文件中，但您需要使用 js 任务管理器和 sass，您在使用吗？
变量肯定可以工作，但为什么不直接使用类并根据需要添加它们呢？
你能举个例子吗？
我的意思是代码中的一个实际示例:)
好吧，我想我不清楚。我目前正在使用 gulp 和 sass。我的问题是从 css 文件中提取一些特定的 css 属性。对于颜色，我使用变量和类。但是扩展那些在主文件中生成大量样式的类。所以我想要的是，在一个单独的文件中为这些颜色类（就像我说的特定 css 属性）生成 css。可能吗？是的，我可以复制，粘贴。但我想知道是否有任何自动化方法可以做到这一点。

标签： css sass gulp

【解决方案1】：

终于找到解决办法了！这有点工作，但需要更多的调整和改进。

let at_data='';
 var css=[];
 var openFile=function(event) {
	var input=event.target;
	var reader=new FileReader();
	reader.onload=function() {
		var text=reader.result;
		var node=document.getElementById('output');
		//node.innerText=text;
		at_data=reader.result.substring();
		at_data.split('}').map(item=> {
			var item2=item.trim();
			var item3=(item2 +"}");
			css.push(item3)
		}
		);
		css.pop();
		//console.log(css);
	}
	;
	reader.readAsText(input.files[0]);
}
;
//console.log(css)
 function getCss (property,
value) {
	const filter=css.filter(function(item, index) {
		const filter2=item.split('{')[1].split(';').filter(function(item2, index) {
			if(item2.trim().startsWith(property)) {
				if(item2.split(':')[1] !==undefined) {
					if(item2.split(':')[1].trim().startsWith(value)) {
						return item2
					}
				}
			}
		}
		);
		return item.includes(filter2[0]);
	}
	);
	var data1='';
	filter.map(data=> {
		data1 +='<p>'+data+'</p>'
	}
	);
	data1 +='';
	document.getElementById('article').innerHTML=data1;
}
var btn=document.getElementById('getStyle');
 btn.addEventListener('click',
function () {
	let pro=document.getElementById('property').value, value=document.getElementById('value').value;
	getCss(pro, value)
}
);

<input type='file' onchange='openFile(event)'><br>
<div id='output'></div>

<input type="text" id='property' value='' placeholder="property">
<input type="text" id='value' value='' placeholder="value">
<button id="getStyle">Click</button>

<article id="article"></article>

【讨论】：