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

时间:2019-03-31 05:45:00

标签: css sass gulp

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

例如,我有一个style.css文件,我只想从其中将所有背景和颜色属性提取到另一个CSS文件中。有可能吗?

TIA

1 个答案:

答案 0 :(得分: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>