慕课笔记--[课程]Less即学即问

一、less简介

Less类似于Jquery,是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

二、koala 安装及使用

参见：http://blog.csdn.net/aaa333qwe/article/details/77427142

编译工具：Koala
也可以使用Node.js或者浏览器端进行编译
声明文档头：@charset "utf-8"
将编写好的less文件拖到Koala中，进行编译，编译后生成css文件，然后将css文件再引入的HTML页面当中
编写还是在less文件中编写

三、less中的注释

 less文件里面的注释有两种。
/**/会被编译到css文件里边
//不会被编译到css文件里边

四、变量

在LESS中使用
@width：100px;
的形式定义变量，

而在SASS中使用的是
$with:100px;

五、less混合

1、带参数的混合

.box{
    background-color:#fff;
   .border;  //引用border样式
}
.border{
   border:1px solid red;
}

2、带参数的混合
.box{
    background-color:#fff;
   .border_02(5px);
}
.border_02(@border_width){
   border:@border_width solid yellow;
}

3、默认混合(不传入参数则走默认值,传入参数则走传进来的这个值)
.border_03(@border_width:10px){
  border:@border_width solid green;
}
.div1{
  .border_03();//走的是默认值,即10px的边框
}
.div2{
  .border_03(15px);//走的是传递进来的参数,即15px的边框
}

六、匹配模式

匹配模式就是先把各种情况写好，在类名后面传入参数，需要时直接调用，传入@_代表不管哪种情况都要带上这段代码。

1、demo1
匹配模式(类似if)
.triangle(top,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:@c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent @c transparent transparent;
  border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent transparent @c;
  border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){
  width:0;
  height:0;
  overflow:hidden;
}
.sanjiao1{
  .triangle(right,10px);
}
2、demo2

.pos(a){
  position:absolute
}
.pos(f){
  position:fixed;
}
.box{
  .pos(f);
}

七、运算

1、可以进行加减乘除运算，只要有一个带像素的即可， 符号两边需要空格

2、运算示例：
 @test_01：300px；
.box_02{width：@test_01 + 20；//如果变量或其它是带单位的，后面相加的数字可以不用加单位}
.box_02(width：（@test_01 - 20）* 5；//如果要先减在乘，就用个括号包起来)
.box_02(color: #ccc - 10) ;/*less会把颜色转成 255 的数值，然后进行计算，输出颜色值对应的颜色，工作中很少用到*/

八、嵌套规则

less嵌套
li{
  a{
     &:hover{// &代表上一层选择器}
  }
}

九、@arguments

@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写：
 @border（@w：30px，@c：red，@s：solid）{
   border：@w @c @s
}
.border_arg(@w:30px,@c:red,@ww:solid){
border:@arguments;//包含所有参数
}
.test_arguments{
.border_arg(40px);
}

十、Less-避免编译与!important关键字

1、Less-避免编译
-有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法
-要输出这样的值我们可以在字符串前加上~
例如：.test_03{
width:~'calc(300px-30px)';   //（原封不动的输出，避免编译）
//对于滤镜等less不认识的语法，避免报错。
} //用双引号也可

2、!important关键字
-会为所有混合所带来的样式，添加上!important
!important拥有样式的最高优先级一般调试的时候才会用

十一、