缺点:
简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
优点:
用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
优点:开发速度提升;
代码优化效率提高(对开发者而言);
代码更通俗易懂(对开发者而言);
维护简单便捷;
代码更干净,优美;
功能更多更强,CSS做出JS的特效(其实就是JS);
缺点:
舍弃用户体验来提高开发的效率,可以查考Bootstrap的缺点;
舍弃网页打开速度换取开发效率提升;
需要一个学习的过程,用之不当反而弄巧反拙;
总而言之,LESS/SASS缺点就是需要多一个编译器来重新编译一次你的CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢(网页显示顺序,从上至下,一般CSS放在头部,先HTML DOM元素-->CSS-->脚本文件-->页面元素如图片,视频,音频--->最后完全显示)
stylus跟sass和less一样都是css预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,官网的介绍为:富于表现力、动态的、健壮的 CSS因为stylus出现的比较晚,因此它的语法比较新。
Stylus默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法。
stylus支持三种注释:
单行注释在编译之后会被删除,多行注释会被保留,多行缓冲注释相当于告诉Stylus压缩的时候这段无视直接输出。
编译之后的css
在stylus中,认为对于元素样式的设置 , {} : 是无意义的,因此在stylus中可以不用书写它们。同样因为没有来这些符号,所有空白符,换行,空格以及tab都很重要,写的时候要慎重。
stylus是用js写的,因此很多语法跟js很像,比如js定义变量:
stylus中定义变量:
Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。如下:
这样就可以简单的通过前置@字符在属性名前来访问该属性名对应的值。
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中,我们默认指定z-index值为1,但是,只有在z-index之前未指定的时候才这样:
属性会“向上冒泡”查找堆栈直到被发现,或者返回null(如果属性搞不定)。下面这个例子,@color最后是blue.
Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{'border' + '-radius'}等同于-webkit-border-radius 比如:
编译之后
编译过后:
stylus中支持混合,语法跟js中定义函数很像,它的作用是用来复制样式或者兼容浏览器
js中定义函数:
在stylus中定义混合语法:
1.混合名称() ,参数集合中可以传递参数,多个参数使用逗号隔开
2.混合名称 参数 ,多个参数使用逗号隔开
3.混合名称 参数 ,多个参数使用空格隔开
1.属性混合
封装一个属性,用来兼容各个浏览器
特点:通常以属性名称定义混合,来覆盖原有的属性,兼容浏览器
2.样式混合
封装的是多个属性,用来复用样式
编译之后
注意:
1.混合的参数集合绝对不能省略
2.混合名称与参数集合之间绝对不能有空格
3.如果参数中出现了空格,我们要使用第二种方式
Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。
很简单的例子,两数值相加的方法:
编译之后
sylus还可以引入外部的stylus文件
stylus会根据@keyframes自动创建兼容浏览器的样式,但是内容样式如果出现了css3则不会处理,需要使用混合书写的方式进行处理
举个栗子:
编译之后:
编译之后:
编译之后:
不管什么原因,如果遇到Stylus搞不定的特殊需求,你可以使用@css使其作为CSS字面量解决
编译为:
Stylus可以字符转码。这可以让字符变成标识符,或是渲染成字面量。注意Stylus中/当作为属性使用的时候需要用括号括起来:
编译为:
需要在vue.config.js中配置
然后在main.js中引入公共样式文件,这样就不需要在组件里面再引入一次公共样式啦
官网: http://stylus-lang.com/
参考中文文档: https://www.zhangxinxu.com/jq/stylus/