摘要:介绍是一个的预处理框架,年产生,来自社区,主要用来给项目进行预处理支持,所以是一种新型语言,可以创建健壮的动态的富有表现力的。
stylus介绍
Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS/LESS 等类似,应该是有很多借鉴,所以近似脚本的方式去写CSS代码,它的文件扩展名是.styl”。
文档参考官方stylus文档
张鑫旭中文翻译
body color white ==> body { color: #fff; } textarea, input border 1px solid #eee ==> textarea, input { border: 1px solid #eee; }
乍一看是不是觉得很奇怪,冒号、花括号、分号统统不见了。这就是stylus的神奇之处,你如果不习惯的话,Stylus也接受标准的CSS语法,同时也可以像Sass老的语法规则,使用缩进控制
body{ color white }
或者
body{ color:white; }
以上两者编译结果都为
body{ color:white; }
stylus同样可以像sass、less等使用Mixins、Functions等
比如mixin
support-for-ie ?= true opacity(n) opacity n if support-for-ie filter unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(n * 100) + ")") #logo:hover opacity 0.5
渲染结果为:
#logo:hover { opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
这里就不对其功能做一一介绍了,详情可以参照上面提供的官方文档
编译生成CSS这里主要讲如何用sublime的插件生成,当然还有命令行、grunt等方式生成本文不做陈述了,想要了解的可以查看stylus入门使用或者参照其他例子
如果你使用sublime,你可以ctrl+shift+p调出控制台然后输入install package然后输入stylus然后回车安装,安装成功后在package settings你会看到如蓝色背景条所示
展开蓝色背景条,在setting-user里面进行配置即可
{ "envPATH": "", //环境的路径 "binDir": "", //项目路径 "compileOnSave": true, //是否编辑保存 "compileDir": true, //编译到指定目录 "compress": true, //是否压缩 "compilePaths": {"": ""} //输出路径 }
设置完成之后建立.styl文件,然后编辑保存,你就会在输出路径里面看到编译好的css文件了
结束语1、现在CSS预处理器技术已经非常的成熟,已经有很多预处理框架Sass、Less CSS、Stylus还有Postcss,选择哪一种完全看个人喜好。
2、网上已经有很多关于stylus的教程,但是在处理编译这一块没有谈及直接用编辑器的插件处理的,至少我之前是没找到相关,也许是我搜索的不够全面。
3、文章有写的不对的地方可以留言指出本人将及时改正,毕竟自己的见解总是有限的,有兴趣的可以加入前端交流QQ群:519875573 进行讨论。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54336.html
摘要:介绍是一个的预处理框架,年产生,来自社区,主要用来给项目进行预处理支持,所以是一种新型语言,可以创建健壮的动态的富有表现力的。 stylus介绍 Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。比较年轻,其本质上做的事情与 SASS...
摘要:默认使用的作为文件扩展名,支持多样性的语法。功能上更为强壮,和联系更加紧密。所以我选择,玩儿过一段时间,主要是这玩意依赖运行,所以我放弃使用了。这样就算是安装完了,也可以正常使用。用于保存项目元数据。 stylus介绍 是个什么鬼?对于开发来说,CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS, SASS都在这方面做了一些贡献。 Stylus 是一个CSS的预...
摘要:上面的命令会将编译的传递给,你可以将它保存到一个文件中除了上面的命令转译源文件之外,现在还有很多第三方开发的工具,例如是一个前端预处理器语言图形编译工具,支持,帮助开发者更高效地使用它们进行开发。 一、Sass、LESS和Stylus的安装 1.Sass的安装 Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装...
摘要:你还需安装一个依赖,告诉使用者,你这个是基于哪个版本开发的,当然你可以不安装这个依赖,那只能自己用了。开发调试在根目录中运行在本机全局为做一个软链接,如果你移动了目录你得重新做软链接。因为你在前面添加了文件事实上导入的文件是。 由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴...
阅读 801·2021-11-22 11:59
阅读 3189·2021-11-17 09:33
阅读 2282·2021-09-29 09:34
阅读 1917·2021-09-22 15:25
阅读 1904·2019-08-30 15:55
阅读 1301·2019-08-30 15:55
阅读 508·2019-08-30 15:53
阅读 3318·2019-08-29 13:55