前端-CSS-Less预处理

Less官网

1.嵌套结构

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

2.编译注释

以// 开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

3.less中的变量

块级作用域
使用@来申明一个变量：@pink:pink
1.作为普通属性值来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

4.less中的嵌套规则

1.基本的嵌套规则
2.&的使用-- 表示当前的父级选择

5.less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量

6. less运算

// 只需要一方有单位即可
with: (100 + 100px)

7.继承

.inner: extend(.innerParent)
// 继承 innerParent 父级的所有属性
.inner: extend(.innerParent all )