CSS预处理器

什么是CSS预处器?
  CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题

sass:
  Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 HTML 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格
  虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因
  Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号{}和分号; ,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

Less(CSS预处理语言):
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端

stylus:可以省略原生CSS中的大括号{},逗号, 和分号 ;类似于python语言的编程风格
举个例子:
1、body
  div
    color white
转化为:
body div {
    color:#fff;
}

2、多个选择器可以使用同一个样式
textarea
  input
      border 1px solid #eee
转化为:
textarea
  input
{
      border:1px solid #eee;
}

3、变量:没有前缀,直接用等号赋值
main-color = #555
color main-color

等……
由于其语法灵活的问题,如果没有团队规范,那么就会带来团队开发混乱,维护起来比较麻烦,各种语法混杂。

猜你喜欢

转载自blog.csdn.net/qq_39178993/article/details/81180298