By

文章目录
  1. 1. less
  2. 2. 嵌套
  3. 3. 注释
  4. 4. 变量及运算
  5. 5. 作用域
  6. 6. 混合

less

css预处理器

嵌套

1
2
3
4
5
6
7
body{
    margin:0
    padding:0
    .wrapper{
        position:relative;
    }
}

注释

1
2
//注释  只想被开发人员看到
/* 包裹注释*/ 会被编译到文件中

变量及运算

1
2
3
4
5
6
@color:red;
@w:400px;
@h:@w+100px;
body{
    color:@red
}

作用域

变量延迟加载 最后依据30px

1
2
3
4
5
6
7
8
9
body{
    @size:15px;
    font-size:@size;
    .wrapper{
        @size:20px;
        font-size:@size;
        @size:30px
    }
}

混合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.border{
    border:solid 1px #ccc;

}

body{
    .border;
}

带变量和混合


.border(@w,@c){
    border:@w solid @c

}

body{
    .border(1px,#000)
}
文章目录
  1. 1. less
  2. 2. 嵌套
  3. 3. 注释
  4. 4. 变量及运算
  5. 5. 作用域
  6. 6. 混合