CSS编写工具：less

1 嵌套

类似于html的结构，通过嵌套，来表现父子级关系，不建议嵌套过多层（包含选择器：不推荐超过三层）

.box{
  .nav{
    border: 1px solid #000;
  }
}

1.1 & —— 父选择器

用于给嵌套父级加伪类

.clearfix{
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}

.box{
  .warp &{
    width: 200px;
  }
}
----------------------------------
.warp .box {
  width: 200px;
}

1.2 深入嵌套-命名空间

加括号后将不会被编译成css语句，类似于函数
只会在调用的时候编译，可节省网站流量

#box1(){
    background: red;
    .fonts(@size:12px){
        font-size: @size;
    }
}
.box2{
    #box1.fonts(20px);
}
--------------------------------------
.box2 {
  font-size: 20px;
}

这一定要指明 xx 下面的.fonts ,因为作用域不一样，不可以直接 .fonts

2 变量

语法 [ @变量名：变量值; ]

@w:100px;

.box{
  width:@w;
}

图片地址 变量

作为插入到一部分内容的变量，要包含在{}：@{变量名}

@imgurl:"../images";

.box1{
  background: url('@{imgurl}/1.jpg');
}
.box2{
  background: url('@{imgurl}/2.jpg');
}
.box3{
  background: url('@{imgurl}/3.jpg');
}

选择器 变量

@box:box_one;

.@{box}{
  width: 100px;
}

特点

1. 变量的声明不是必须在使用前
2. 变量名同作用域下不能重复，否则会被更改掉（后者覆盖前者）
3. 作用域，less中，是有作用域的，作用域会影响当前的变量，在什么范围内是有效的，是否会替换

3 混合

概念：将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性

无参数混合

box{
  height: 200px;
  background: red;
}
.content{
  .box; //也可以是 .box()
}

传参混合

.box(@a,@b){
  height: @a;
  background: @b;
}
.content{
  .box(200px,red);
}

这种方式，对于数值方面更加自由，但是也有缺点，加了()的那个样式，会发现在css中没有出现。而且，如果使用的时候，不传入参数，会编译失败，这时候我们可以设置默认值

默认值传参混合

.box(@a:200px,@b:red){
  height: @a;
  background: @b;
}
.content{
  .box;
}

arguments

用于收集并传递括号中所有参数

.border(@w:2px,@s:solid,@c:red){
  border: @arguments;
}
.box{
  .border;
}

4 运算

.box{
  width:800px - 50 * 2;
  height:800px - 50 * 2;
  padding:50px;
}

运算符使用注意事项(加减乘除)

• 运算符的左右，都保留空格
• 运算的时候，最好包裹在()内
• font 复合样式容易有问题：/ 的使用
• 当运算数值具有单位时，需要注意：
  • 一个单位：最终结果根据唯一的这个单位
  • 两个单位：为第一个单位

5 继承

直接调用继承：继承包括子元素样式

.box{
  width: 200px;
  height: 200px;
  .a{
    color: red;
  }
}
.box1{
  .box;
}

---------------------------------
.box {
  width: 200px;
  height: 200px;
}
.box .a {
  color: red;
}
.box1 {
  width: 200px;
  height: 200px;
}
.box1 .a {
  color: red;
}

extend：只继承父级

.box{
  width: 200px;
  height: 200px;
  .a{
    color: red;
  }
}
.box1:extend(.box){
}

和混合的最终结果是一样的，但是在显示上面是有差别的，这里最终的显示会用群组选择器，另外，继承不能使用参数

6 判断

.box(@w) when(@w>0){
  width:@w;
}
.box1{
  .box(40px);
}

与：and

.box(@w,@h) when (@w>0) and (@h>0){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,0px);
}

或： ,

.box(@w,@h) when (@w>0), (@h>0){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,0px);
}
---------------------------------------
.box1 {
  width: 100px;
  height: 0px;
}

非：not

.box(@w,@h) when not (@w=100){
  width: @w;
  height: @h;
}
.box1{
  .box(100px,120px);
}

7 合并

• 允许对可以接受多个属性的，例如：背景、阴影进行拼接合并

利用,隔断的，使用+

.box(){
    width: 200px;
    height: 200px;
    box-shadow+: 10px 10px 5px #000;
}
.box2{
    .box();
    box-shadow+: inset 5px 5px 5px red;
}
--------------------------------------------
.box2 {
    width: 200px;
    height: 200px;
    box-shadow: 10px 10px 5px #000,
    inset 5px 5px 5px red;
}

利用空格隔断的，使用+_

.box(){
    width: 200px;
    height: 200px;
    transform+_: translate(100px);
}
.box2{
    .box();
    transform+_: rotate(3600deg);
}
---------------------------------------------------
.box2 {
    width: 200px;
    height: 200px;
    transform: translate(100px) rotate(3600deg);
}

8 映射

• 从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
    primary: blue;
    secondary: green;
}

.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
}
---------------------------------------------------
.button {
    color: blue;
    border: 1px solid green;
}



@size:{
    max:1200px;
    mid:800px;
    min:500px;
}

.box{
    width: @size[max];
}

9 其他常用操作：

导入less文件Importing —— @import "lib.less";

相当于直接复制less文件中的代码，极大节省HTTP请求

注释//

双斜杠注释方式不会编译到css文件里，所以在less里注释吐槽项目经理就不会被发现啦！

避免编译 —— ~：~'/'

/将直接翻译成字符串传入css