第八章
1、Sass和Less
Sass和Less都属于CSS预处理器，CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，
如：变量、语句、函数、继承等概念。将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
官网地址： http://lesscss.org/
VSCode插件：Easy LESS
官网地址： https://sass-lang.com/
VSCode插件：Easy Sass
语法：
注释
变量，插值，作用域
选择器嵌套，伪类嵌套，属性嵌套(Sass)
运算，单位，转义，颜色
函数
混入，命名空间(Less)，继承
合并，媒体查询
条件，循环
导入
…
2、CSS架构
在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分等问题。
首先要对CSS进行模块化处理，一个模块负责一类操作行为。可利用Sass或Less来实现。
|
文件夹 |
含义 |
|
base |
一些初始的通用CSS，如重置默认样式，动画，工具，打印等。 |
|
components |
用于构建页面的所有组件，如按钮，表单，表格，弹窗等。 |
|
layout |
用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等。 |
|
pages |
放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等。 |
|
themes |
应用不同的主题样式时，如管理员，买家，卖家等。 |
|
abstracts |
放置一些如：变量，函数，响应式等辅助开发的部分。 |
|
vendors |
放置一些第三方独立的CSS文件，如bootstrap，iconfont等。 |
3、PostCSS
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。利用PostCSS可以实现一些工程化的操作，如：自动添加浏览器前缀，代码合并，代码压缩等。
官方网址：https://postcss.org/
安装：
1. 安装node环境
2. npm install postcss-cli –g
3. -o 、-w
4. postcss.config.js
4、CSS新特性之自定义属性
CSS 自定义属性(也称为“CSS 变量”)，在目前所有的现代浏览器中都得到了支持。
定义与使用
计算
默认值
作用域
5、CSS新特性之shapes
CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。
shape-outside
clip-path
shape-margin
6、CSS新特性之scrollbar
CSS scrollbar用于实现自定义滚动条样式。
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
7、CSS新特性之Scroll Snap
CSS Scroll Snap（CSS 滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。
scroll-snap-type
x
mandatory
scroll-snap-align
start
center
end
