学习ECMAScript6以后涉及的知识越来越多，以前一些没有特别在意的知识点需要做归纳整理了。
比如CSS部分，以前我写样式使用的是CSS，现在主流的是使用Less，还有Sass、Scss、Styleplus来完成样式的编写，虽然Webpack借助额外的程序对这一部分转译为CSS语法，但是作为一个合格的前端开发者了解和掌握CSS的演变还是挺重要的，对于CSS 预处理器应该熟悉至少一种 CSS 预处理器，如 Sass、Less 等，并能使用它进行开发。
CSS （Cascading Style Sheets） 是一种用于描述网页的外观和布局的语言，最早是由 W3C （World Wide Web Consortium） 在 1996发布。
HTML负责网页内容，JavaScript负责控制网页的行为，CSS负责网页的显示，这个是不是有点类似于MVC模式？
CSS发布至今已经很强大了，但仍然有一些限制比如不支持变量或嵌套等，所以有了预处理器，就是为了前端开发者更灵活地书写CSS，预处理器负责将样式代码转译为CSS代码，比如耳熟能详的Less、Sass等。
Less是2009年由一个叫 Alexis Sellier 的人发布的， 它增加了变量和嵌套规则等额外功能。
Sass是2007年由 Hampton Catlin 和 Nathan Weizenbaum 发布的， 它增加了变量、嵌套、混合等功能。
Less和Sass是目前被广泛使用的 CSS 预处理器，使得 CSS 的编写更加简单和高效。
Sass的写法类似于Python，强调严格的缩进，这个我不习惯，基本上就不用了。
1、目前主流的CSS预处理器
⑴ Less（Leaner style Sheets），它是一种类似 Sass 的 CSS 预处理器，提供了变量、嵌套、混合等特性。
⑵ Sass（Syntacally awesome style Sheets），它是一个强大的 CSS 扩展语言，提供了变量、嵌套、混合、循环等
⑶ Stylus，它是一种类似 Sass 和 Less 的 CSS 预处理器，提供了变量、嵌套、混合等特性。
⑷ PostCSS，它是一个用于处理 CSS 的工具集，可以用来进行语法转换、代码规范检查、优化等操作。
⑸ CSS in JS，它是一种将 CSS 代码嵌入到 JavaScript 中的方式，常用的库有 styled-components，emotion等。
举例（Less）
<style type="text/less">
table {
font-size: 12px;
color: black;
transition: background-color 0.2s ease-in-out;
tr:nth-child(odd) {
background-color: lightgray;
}
tr:nth-child(even) {
background-color: darkgray;
}
tr:hover {
font-size: 14px;
background-color: lightcoral;
color: white;
}
tr:active {
color: darkred;
}
&:not(:hover) {
tr {
font-size: 12px;
background-color: initial;
color: black;
}
}
}
</style>上面的Less代码需要通过转译器转译为CSS代码后才能正常使用，只是简单地演示了嵌套和&的用法，如果要在网页里直接应用，需要加载编译器，我使用了less-min.js。
<script src="less-min.js"></script>效果图：
在《JavaScript(2)：纯JavaScript代码生成动态表格和动态效果》 中，我是通过JavaScript来实现上面的效果的，可是纯CSS也能实现同样的效果，CSS已经很强了！
Less在线预览（转CSS）：https://lesscss.org/less-preview/
Sass在线预览（转CSS）：https://www.sass.hk/css2sass/
2、CSS的演变
CSS 被广泛应用于网页和移动应用的布局和设计中。
⑴ 在最初的版本中，CSS 支持了基本的文本样式，如字体、颜色和对齐方式。随着版本的更新，CSS 添加了许多新的特性，如盒模型、浮动、定位和网格布局等。
⑵ CSS 2.0 在 1998 年发布， 添加了更复杂的布局功能，如浮动和定位，以及支持多列布局和和页面打印。
★、绝对定位和浮动：使用position: absolute;和float: left/right;可以让元素在页面中绝对定位或浮动。
/*绝对定位*/
#myDiv {
position: absolute;
left: 100px;
top: 50px;
}
/*浮动*/
#myImg {
float: left;
}★、选择器: CSS 2.0引入了新的选择器，如后代选择器、类选择器和伪类选择器等。
/*后代选择器*/
#myList li {
//样式规则
}
/*类选择器*/
.highlight {
//样式规则
}
/*伪类选择器*/
a:hover {
//样式规则
}★、多列布局: CSS 2.0支持多列布局，可以使用column-count和column-width属性来设置列的数量和宽度。
#myContent {
column-count: 2;
column-width: 300px;
}★、盒模型: CSS 2.0引入了盒模型的概念，使用width、height、padding、border和margin属性来控制元素的大小和位置。
#myBox {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}⑶ CSS 3.0 在 1999 年发布，其中包括了许多新的特性，如动画、转换、过渡和媒体查询等。
★、圆角: 使用border-radius属性可以给元素设置圆角。
#myDiv {
border-radius: 10px;
}★、阴影: 使用box-shadow属性可以给元素设置阴影。
#myDiv {
box-shadow: 5px 5px 10px #888888;
}★、过渡: 使用transition属性可以让元素在某些属性改变时过渡到新的值。
#myDiv {
transition: background-color 1s ease;
}★、动画: 使用animation属性可以让元素运行动画。
#myDiv {
animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}★、线性渐变: 使用linear-gradient属性可以给元素设置线性渐变背景。
#myDiv {
background: linear-gradient(to right, #ff0000, #ffff00);
}★、多背景: 使用background-image属性可以给元素设置多个背景图像。
#myDiv {
background-image: url(img1.png), url(img2.png);
}★、媒体查询: 使用@media规则可以根据屏幕大小和设备类型应用不同的样式。
@media screen and (min-width: 600px) {
//样式规则
} 随着网页设计和开发的不断进化，CSS也在不断发展和演变。随着 CSS3 的推出， CSS 已经支持了许多新的特性，如响应式设计、动画和 3D 变换等。在后来的版本中， CSS 也添加了许多新的特性，如 flexbox 和 grid 布局，使得前端开发更加灵活和高效。
目前，CSS4.0还没有发布，但是它已经在开发中，已知的一些新特性可能包括但不限于：
新的选择器，如:matches()、:not()、:dir()等；
媒体查询的扩展，如:hover、:any-pointer等；
新的布局模型，如:Grid Layout、Flex Layout等；
新的文本特性，如:text-align-last、text-justify等；
新的背景特性，如:background-clip、background-origin等。