使用CSS 预处理器的优缺点有哪些

html-css021

使用CSS 预处理器的优缺点有哪些,第1张

缺点:

简单来说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/