less学习小记

什么是Less?

css的Less好比是js的Jquery，可以让人们更方遍快捷的使用css，使css代码更简洁，可以减少重复的代码，减少开发人员的工作量。

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

Less和Sass的区别

1. Less和Sass的主要不同就是他们的实现方式：

   Less是基于JavaScript，所以，是在客户端处理的。

   Sass是基于Ruby的，然后是在服务器端处理的。
   其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)

2. SASS和LESS在变量作用域上也有明显差别。LESS具有全局变量，而SASS暂时不具有全局变量的概念。
3. SASS比LESS更完善的点还在于SASS能通过@function的方式编辑函数；通过@for循环或者@each循环对数据进行循环；通过@if else对数据进行判断

Less的学习

1. 注释
   less中有两种注释：/**/和//。使用/**/的注释是会被编译进css文件的，而使用//的注释不会被编译进css文件。
   由于我们应该一般编写和维护less文件，所以我们一般采用第二种注释，无需将注释编译进css文件。

2. 变量
   less中使用@声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格
   变量的使用：

      //less文件
      @myWidth : 200px;
      @myHeight : 500px;
      
      #main {
          width: @myWidth;
          height: @myHeight;
          background-color: yellowgreen;
      }
   
   

3. 混合

将less写法与常规的css写法进行混合书写

    //less文件
    @charset "utf-8";
    
    @myWidth : 200px;
    @myHeight : 200px;
    
    #main {
        width: @myWidth;
        height: @myHeight;
        background-color: yellowgreen;
        .border
    }
    
    .border {  
        border:3px solid pink
    }

可以带参数,设置默认值：

//less 
.border(@mywidth: 4px){
    border: @mywidth solid green;
}

.mybox {
    .border(5px);
}

//css
.mybox {
  border: 5px solid green;
}

4.匹配模式

   // 根据不同的参 数可以匹配不同的样式：
        .pos(r) {
            position:relative;
        }
        
        .pos(a) {
            position:absolute;
        }
        
        .pos(f) {
            position:fixed;
        }
        
        .pipei {
            width:200px;
            height:200px;
            background-color:green;
            .pos(f);     //.pos(r)   .pos(a) 传入不同的参数，实现不同的定位方式
        }

5.运算
less中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中

//less
.border(@mywidth:4px){
    border: @mywidth + 5px solid green;    //这里的单位可以省略，但是两者必须有一个带单位
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

6.嵌套
嵌套是less中非常有用、高效的语法

//less
#list {
    width: 600px;
    margin: 30px auto;
    list-style: none;
    padding: 0;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;

        a {
            float: left;
            // 伪类选择器
            &:hover {
                font-size:20px;
              }
        }

        span {
            float: right;
        }
    }
}

7.arguments参数
有时候我们不想单个操作参数，可以使用@argemunts操作参数。

//less
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg();
}

//css
.test_arguments {
  border: 30px red solid;
}

8.避免编译
有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们需要使用~""将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让less编译该段代码：