CSS中的单位

整体可以分为两类：

绝对长度单位（Absolute length units）

相对长度单位（Relative length units）

px(像素)单位常见的有三种像素名称：

设备像素（也称之为物理像素）:指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了；我们在购买显示器或者手机的时候，提到的设备分辨率就是设备像素的大小
设备独立像素（也称之为逻辑像素）: 如果面向开发者我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的
CSS像素: ，它在默认情况下等同于设备独立像素（也就是逻辑像素）

可以通过JavaScript中的screen.width和screen.height获取到电脑的逻辑分辨率

CSS预处理器

Less

Less增加了很多相比于CSS更好用的特性;比如定义变量、混入、嵌套、计算等等，最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）

编译方式：

下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译
通过VSCode插件来编译成CSS或者在线编译 lesscss.org/less-previe…
引入CDN的less编译代码，对less进行实时的处理

<link rel="stylesheet/less" href="lessDemo.less">
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

常见语法：

Less是兼容CSS的，只是将css的扩展名改成了.less结尾而已
定义变量@变量名：变量值；

@mainColor: #da2f2f;
.box{
  height: 200px;
  width: 200px;
  color: @mainColor;
}

嵌套

.box{
  height: 200px;
  width: 200px;
  color: #fff;
  
  .demo{
    font-size: 20px;
  }
}

特殊符号：& 表示当前选择器的父级

  a.link{
    font-size: 20px;
    color: red;

    &:hover{  // &相当于a.link
      color: #7ce718;
    }
  }

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算，运算前会进行单位换算，计算的结果以最左侧操作数的单位类型为准

.box{
  height: 200px * 2;
  width: 200px;
  background-color: #7ce718 + #6c0e0e;
}

混入（合）

将重复代码进行抽取到一个独立的地方，任何选择器都可以进行复用

// 混入的基本使用
.nowrap_ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 混入传递参数
.box_border(@borderWidth:5px, @borderColor:#b22020){
  border: @borderWidth solid @borderColor;
}

// 混入结合映射（Map），作用：弥补less中不能自定义函数的缺陷
.box_size{
  width: 100px;
  height: 200px;
}

.box1{
  width: .box_size()[width]; // 使用映射
  background-color: #7ce718;
  .nowrap_ellipsis()； // 基本使用，混入在没有参数的情况下，小括号可以省略，但是不建议这样使用；
  .box_border(10px,#d036e1); // 传递参数
}

less内置函数手册：less.bootcss.com/functions/

Sass/Scss

Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进

Sass语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的

学习Scss sass-lang.com/guide

CSS-单位+预处理器

CSS中的单位

CSS预处理器

Less

Sass/Scss

Stylus