CSS转Less,Sass,Stylus

CSS代码转换工具,CSS代码转换为less,sass或stylus

上传 CSS
关于变量:变量要以@开头表示,这里填写变量,可以替换转换结果中特定的内容。
例如:@blue:#5b83ad;表示用@blue替换#5b83ad;

将CSS代码转换为less、sass或stylus的工具

这是一款CSS代码转换的免费工具,可以自动将CSS代码转换为less,也可以把CSS代码换为sass,或者转为stylus。CSS代码转换工具支持添加自定义变量,而且编辑器高亮显示代码,方便实时修改编辑。


CSS转Less、Sass、Stylus工具使用说明

1、输入CSS:直接上传本地CSS文件,或者在第一个输入框内直接输入CSS代码。

2、填写变量:如果没用到变量,留空不填写。如果用到变量,可以填写变量,所填变量会自动替换转换结果中特定的内容。

3、CSS转换为:根据需求,可以选择Less、Sass、Stylus

4、代码缩进:为了便于阅读,转换后的代码可以缩进2个空格、4个空格,或者1个Tabs。建议选择空格缩进,因为Tabs在不同编辑器内缩进量不同,可能会导致混乱。

5、代码注释:选择代码注释方式、位置,如果不勾选,则会删除CSS中的注释。

5、Hacks:勾选则会去除CSS中Hack部分的代码。

6、会自动输出转换结果,你可以一键保存转换结果,也可以复制转换后的代码手动保存,如果转换为Less,后缀名(扩展名)为.less;如果转换为Sass,后缀名为.scss;如果转换为Stylus,后缀名为.styl


关于CSS、Sass、Less和Stylus

1、CSS,全称Cascading style Sheets,即“层叠样式表单”,用于精准控制页面布局元素的背景颜色、位置、大小等。

2、Sass、Less、Stylus,都是CSS的预处理语言,在基于标准的CSS语法的基础上,扩充了CSS,增加了诸如函数、混合(mixin)、变量、嵌套、运算、继承、颜色处理等功能,使其拥有了更加灵活、更加实用的可编程性。


/* Outside Comment */
header {
	padding:20px;
}
header h1 { /* Nesting */
	font-size:24px;
	_font-size: 25px;
	*font-size: 26px;
	-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.9);
	-ms-box-shadow: 0 0 0 rgba(0,0,0,0.9);
	-moz-box-shadow: 0 0 0 rgba(0,0,0,0.9);
	-o-box-shadow: 0 0 0 rgba(0,0,0,0.9);
	box-shadow: 0 0 0 rgba(0,0,0,0.9);
}
header h1 a {
	text-decoration:none;
}
header h1 a:hover { /* Pseudo-classes */
	text-decoration:underline;
	/* Data URL */
	background: url(data:image/jpg;base64,/9j/4QfweFWEgrGhehQewfFWEkqAAgAAAAL....) 0 0 no-repeat;
}
header h1 a:hover span {
	color: #5b83ad;
}
header img {
	border:none;
}
header img.glow { /* Classes */
	border:solid 1px #f00;
}