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)、变量、嵌套、运算、继承、颜色处理等功能,使其拥有了更加灵活、更加实用的可编程性。