关于Less的学习笔记

Less简介部分记录：

1、 Less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充，是一种动态样式语言。
2、 编译工具：Koala。
3、 注释（两种方式）：

 /*   此种注释会被编译，即此句注释会出现在编译好的CSS文件中。 */   
 //   不会被编译。

4、 变量：
声明变量：@变量名:值;
5、 混合使用：可带参数，也可不带参数。
好处：CSS3兼容性使用，修改方便。
6、 匹配模式：满足条件后才匹配。
7、 运算：可进行加减乘除的运算。

Less代码学习部分记录：

1、定义编码方式：

@charset "utf-8";

2、普通的CSS代码编写：

body{
    background-color: cornsilk;
}

3、注释的区别：

/* Can see */
// Can't see

4、变量的声明使用：

@test_width:320px;

.box{
    width: @test_width;
    height: @test_width;
    background-color: #FF7F50;
}

5、混合：

（1）不带参数的混合：

.border{
    border: 10px solid #5F9EA0;
}
.box{
  .border;
}

（2）带参数的混合：

1）没有默认值，一定要传参：

.border_02(@border_width){
    border: @border_width solid firebrick;
}
.test_mix{
    .border_02(30px);
}
.box{
  .test_mix;
}

2）带默认值：

.border_03(@border_width:20px){
    border: @border_width solid lightgreen;
}
.test_mix_03{ 
    .border_03();//可以不传参
    .border_03(50px);//可以传参
}
.box{
    .test_mix_03;
}

6、CSS3兼容性使用举例：

.border_radius(@radius:8px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.radius_test{
    width: 200px;
    height: 120px;
    background-color: darksalmon;
    margin-top: 20px;
    .border_radius();
}

7、匹配模式：

（1）举例：画一个三角形

/*画一个三角形的原始方法*/
.triangle{
  width: 0;
  height: 0;
  margin-top: 10px;
  border-width: 60px;
  border-color: transparent transparent mediumvioletred transparent;
  border-style: dashed dashed solid dashed;//解决IE6有黑色边框问题
}

/*用匹配模式画三角形*/
.triangle_test(top,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}//向上的三角形
.triangle_test(bottom,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}//向下的三角形
.triangle_test(left,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent @c transparent transparent ;
    border-style: dashed solid dashed dashed;
}//向左的三角形
.triangle_test(right,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}//向右的三角形

//@_：代表始终带着这个函数运行
.triangle_test(@_,@w:60px,@c:mediumvioletred){
    width: 0;
    height: 0;
    margin-top: 25px;
}

.triangle{    
//根据想得到的匹配格式画三角形 
  .triangle_test(top);
  .triangle_test(bottom);
  .triangle_test(left);
  .triangle_test(right);
//非匹配格式则css代码中只生成@_部分的代码
  .triangle_test(aaa);
}

（2）举例：定位的使用

.pos(r){
    position: relative;
}
.pos(ab){
    position: absolute;
}
.pos(f){
    position: fixed;
}
.test{
    width: 120px;
    height: 120px;
    margin-top: 20px;
    background-color: gold;
    .pos(r);
    .pos(ab);
    .pos(f);
}

8、运算（加减乘除）：

@test_01: 300px;
.box_02{
    width: @test_01 + 80;
    height: @test_01;
    margin-top: 20px;
    background-color: deepskyblue;
}