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 )
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐