css预处理器

CSS 预编译工具有stylus,sass,less 为什么会出现CSS预编译器这个东西呢?

这就要谈到CSS的不足了:没有变量(新的规范已经支持了),不支持嵌套,编程可以力较弱,代码复使用性差。这些不足导致写出来的CSS维护性极差,同时包含大量重复性的代码;为了弥补这些不足之处,CSS预编译器应运而生。而谈到CSS预编译器,就离不开这三剑客Sass、Less、Stylus。历史上,最先登场的是Sass,由于出现最早,所以也是最完善的,有各种丰富的功可以;Less的出现伴随着Bootstrap的流行,因而也取得大量使用户;最后是Stylus,由TJ大神开发(敬大神),因为其简洁的语法,更像是一门编程语言,写起来非常Cool。

less 和scss有什么区别呢?

不同点:

1、变量的声明方式不同:

less:@

scss $

2、作用域不同,less存在变量提升,scss没有变量提升

3、插值使用方式不同: less  @{key}    scss  ${$key}

4、scss可以使用if{ } else ,for循环等,less是不支持的

5、引入外部的css文件方式不同

scss 引入的文件名必须以_(下划线)开头。

6、LESS和SCSS都可以使用&符号表示父选择器,但是SCSS的&符号只能出现在一个组合选择器的开始位置,LESS则没有这个限制

7、

sass的安装环境需要Ruby环境,是在服务端处理的;

less需要引入less.js来处理代码输出到css到浏览器,也可以在开发环节使用less,然后编译成css文件直接使用

相同点:

  1. LESS和SCSS都是css的预处理器,可以拥有变量,运算,继承,嵌套的功能,使用两者可以使代码更加的便于阅读和维护。
  2. 都可以通过自带的插件,转成相对应的css文件。
  3. 都可以参数混入,可以传递参数的class,就像函数一样
  4. 嵌套的规则相同,都是class嵌套class
posted @ 2022-08-31 15:34  深蓝XO  阅读(27)  评论(0编辑  收藏  举报