文章目录
（一）： Sass与Less
1、简介：
Sass、Less都属于css的预处理器，css预处理器定义了一种新的语言，
其基本思想就是，用一种专门的语言，为css增加了一些编程的特性，
如变量、语句、函数、继承等概念。
将css作为目标生成文件，然后开发者就只要使用这种语言进行css编码工作.
注意：预处理文件浏览器不能识别，需要编程css文件浏览器才能识别
2、Sass和Less的创建和转换为css
Sass：
官方网站：http://lesscss.org/
VS Code插件： Easy LESS
Less：
官网地址：http://sass-lang.com/
VS Code插件： Easy Less
（官网上有相关的使用教程和相关API的使用）
创建 ：
Less-------->创建为.less文件
Sass-------->创建为.sass（老版）或者创建为.scss（新版）
.sass文件和.scss文件的区别：
(推荐使用.scss文件)
转换：
当你在VS Code创建一个less文件或者创建一个scss文件的时候，保存的时候自动生成一个对应的css文件
. Less保存 -----> 只对应生成一个css文件
.cscss保存 -----> 对应生成一个.css和一个.min.css文件（压缩格式的css文件）
3.Less
(1)注释： 添加单行注释在less文件中，不会编译到css文件中
添加多行注释在less文件中，会编译到css文件中
(2)变量：
声明： @变量名：值
如：@number:123px
使用：如：width：@变量名
(3)插值：
例1：
声明变量： @key:margin 使用： @{key}:auto;
例2：
声明变量： @i:1 使用：.box@{i}:{css样式} --->写 .box2类选择器
(利用@{变量})
(4)作用域：
就近原则（上下找最近的）
(5)选择器嵌套：
(6)伪类嵌套 （加&符号）
(7)运算：
两个单位不同的时候以第一个数的单位进行转换
(8)函数：
（还有许多的函数，去官网的api中去查看）
（9）混入
Less的混入就是把不同的css混合在一起，一个css混入到另一个css中
（在.box6中调用了.show和.hide选择器的css样式）
（可以看出.hide选着器后面加入括号之后，在生成的css样式中不会出现）
（可以看出可以往括号中加入参数）
（10） 命名空间（less有，cass中是没有）
在命名空间中声明自己的很多样式，
可以混入该命名空间中的css样式选着器
（声明一个命名空间以#开头，不要忘记有空号）
（引用命名空间里面的css样式选择器的时候 #命名空间.css样式选择器）
（11）继承
（继承一个css样式选择器： &:extend(.父类css样式选择器) ）
(12)合并
合并就是把多个值合在一起
（利用 + 号 以逗号的形式合并在一个属性中）
（利用 +_ 符号 以空格的形式合并在一个属性中）
(13)媒体查询
(14)条件
When（判断条件） 进行判断
(15)循环
(16)导入
一个less文件中导入另一个less文件
@import ‘less文件路径’
4.Sass
(1) 注释： 添加单行注释在less文件中，不会编译到css文件中
添加多行注释在less文件中，会编译到css文件中
(2) 变量：
声明： $变量名：值 使用：如：wither：$变量名
(3) 插值：
例1：
声明变量： $key:margin 使用： #{key}:auto;
例2：
声明变量： $i:1 使用：.box#{i}:{css样式} --->写 .box2类选择器
(利用#{变量})
(4) 作用域：
就近原则（只往上找最近的）
(5)选择器嵌套：
(6)伪类嵌套 （加&符号）
(7)属性的嵌套(less中没有，sass中才有的)
(8)运算
当两个单位不同的时候进行运算，会报错
（加小括号就可以一起运算）
(9)函数：
sass还可以自定义函数：
利用@function 函数名（$形参）{函数体 @return $返回值；}
(10)混入
可以看出sass的混入是需要添加关键字@mixin
调用的时候需要添加关键字 @include
（可以看出@mixin声明的不会相应的生成css样式选着器）
（11） 继承
(17)合并
(18)媒体查询
(19)条件
(20)循环
(21)导入
一个.scss文件中导入另一个.scss文件
@import ‘.scss文件路径’
（二）：PostCSS
1.简介
PostCSS本身是一个功能比较简单的工具.他提供了一种方式用js代码来处理css代码。利用PostCSS可以实现一些工程化操作，
如：自动添加浏览器前缀，代码合并，代码压缩等等。
官方网站：http://postcss.org/
工程化，处理化，css的后处理
（在官网进行下载，postcss提供了很多功能的插件，我们主要来掌握某些插件的使用方法）
下载安装：
1.先安装node环境
2.npm install postcss -cli -g
2.使用：
在dos命令下：
Postcss 要处理的css文件路径 -o 处理后的css保存路径
（每改一次css要执行一次该命令后处理的css才会修改）
Postcss 要处理的css文件路径 -o 处理后的css保存路径 -w
（只要不关闭该命令，该后处理的css自动修改）
（按两次ctrl+c结束）
真正要处理的时候要进行写Postcss.config.js配置文件
（主要的是要求配置我们要使用的插件）
3.Postcss常见的插件
（在dos命令下载相应插件（或者在官网下载）和在官网查看插件的使用方法）
（写好Postcss.config.js配置文件中引入相关插件的使用规则）
（怎么写Postcss.config.js以后网上自己学）
插件一： autoprefixer插件 -------> 自动添加浏览器前缀
插件二： postcss-import插件 ------> 对多个css文件进行合并
插件三： cssnano插件 ------> 对css文件进行压缩处理
插件四： postcss-cssnext插件---> 处理比较高级的css语法
（进行降级，使所有的浏览器都可以使用该css语法）
插件五： stylelint插件 ---> 语法检查规范
插件六： postcss-sprites插件 -------> 自动合并背景图为雪碧 图，并且自动换为雪碧图的定位
（三）: CSS架构与文件组织
在一个大型的项目中，由于页面过多，导致css代码难以维护和开发.
所以CSS架构可以帮助我们解决文件管理和文件划分等问题
（实现要对css进行模块化处理,一个模块负责一类操作行为.
可利用Sass或者less来实现）
都是可以划分为什么模块？？？
把不同的模块利用文件夹进行划分，同一个模块的css文件放到同一个文件夹中
（在一个less中导入全部的css文件，生成一个总的css文件）
（四）：css新特征
1.自定义属性
定义 --变量名: 值；
引用 var(--变量名)或者var(--变量名，默认值) 当该变量错误的时候，为默认值
作用域 先优先级在就近原则
2.Shapes
CSS shapes 能实现不规则的文字环绕效果，需要和浮动配合使用.
shape-outside:none; 加上不规则文字环绕
shape-outside:区域； 在该区域进行环绕
Shape-outside:选项； 绘制不规则的图形
Shape-margin:px； 不规则图形的外边距
3.Scrollbar
CSS scrollbar用于实现自定义滚动条样式
盒子：：-webkit-scrollbar{设置滚动条样式} 给该盒子设置一个滚动条（html为整个页面）
盒子：：-webkit-scrollbar-thumb{拖拽的样式}
盒子：：-webkit-scrollbar-track{滚动条容器的样式}
4.scroll snap
CSS scroll snap（css滚动捕捉）允许你在用户完成滚动后锁定特定的元素或位置
在外面容器上加上
Scroll-snap-type: x mandatory; x代表x轴
在子项上添加
Scroll-snap-align: end;
版权声明：本文为weixin_44051048原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。