less语法

前端less学习

介绍

less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Minxin、函数等特性，使CSS更易维护和扩展。Less既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/

Less编译工具

koala官网：http://koala-app.com/

less中的注释

以//开头的注释，不会被编译到css文件中

以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来申明一个变量：@pink:pink;

1. 作为普通属性值来使用：直接使用@pink
2. 作为选择器和属性名：#@{selector的值}的形式
3. 作为URL：@
4. 变量的延迟加载

less中的嵌套规则

1. 基本嵌套规则
2. &的使用。如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

1. 普通混合。

   不带参数的，不加括号，直接使用。(缺点：会编译到原生css里面去)

2. 不带输出的混合。

   不带参数，加括号。不会编译到css里面去

3. 带参数的混合。

   .border-radius (@radius) {
     border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
   }
   

4. 带参数并且有默认值得混合

   .border-radius (@radius: 5px) {
     border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;
   }
   

5. 命名参数。

   形参和实参个数不同或者顺序不一致时，可以使用命名参数

   .juzhong(@s,@c,@w){
       left: 0;
       right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
       border-style:@s ;
       border-color:@c ;
       border-width:@w ;
          
   }
   .wrap{
      
       position: relative;   
       width: 400px;
       height: 400px;
       background: deeppink; 
       .juzhong(solid,blue,10px);
         
         .inner{
           position: absolute;       
           width: 200px;
           height: 200px;
           background: pink;        
           .juzhong(@c:black,@s:solid,@w:10px);    
               
       }
   }
   

6. 匹配模式

   就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合。无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码@_: 表示通用的匹配模式

   不同方向的三角形

   .triangle(@_, @width, @color) {
     width: 0;
     height: 0;
     border-style: solid;
   }
   .triangle(Bottom, @width, @color) {
     border-width: @width;
     border-color: @color transparent transparent transparent;
   }
   .triangle(Left, @width, @color) {
     border-width: @width;
     border-color: transparent @color transparent transparent;
   }
   .triangle(Top, @width, @color) {
     border-width: @width;
     border-color: transparent transparent @color transparent;
   }
   .triangle(Right, @width, @color) {
     border-width: @width;
     border-color: transparent transparent transparent @color;
   }
   
   .box1 {
       .triangle(Top, 50px, skyblue);
   }
   

   

7. arguments变量(了解即可)

   @arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

   .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
     box-shadow: @arguments;
     -moz-box-shadow: @arguments;
     -webkit-box-shadow: @arguments;
   }
   .box-shadow(2px, 5px);
   

less的计算

• less中可以直接给变量进行一些运算操作的，比如进行 + - * /操作等，你也可以使用()小括号来添加一些更复杂的运算操作；
• less中进行运算操作的时候，不强制你进行运算操作的值必须带单位，只要有一个有单位就可以了

@width: 100px;
@height: 30px;

.box_demo {
    width: @width +20;
    height: (@height + 10) * 5;
}

编译结果：

.box_demo {
    width: 120px;
    height: 200px;
}

less继承

• less继承方便代码模块化
• 继承不支持带参数
• 性能比混合高，灵活度比混合低

语法： 获得继承名：extend（继承部分名）{…}

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.header:extend(.jicheng){
  /*header自身代码*/
  padding: 0 auto;
}

CSS：

.jicheng,
.header {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.header {
  /*header自身代码*/
  padding: 0 auto;
}

继承所有状态（如伪类选择器）

语法： 获得继承名：extend（继承部分名 all）{…}

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.jicheng:hover{
  background: red;
}

/*没有加all*/
.header:extend(.jicheng){}
/*加入all*/
.footer:extend(.jicheng all){};

CSS

.jicheng,
.header,
.footer {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.jicheng:hover,
.footer:hover {
  background: red;
}

less避免编译

less里面有一个避免编译，有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~“ “

.test_03{
　　width: 300px;
　　height: calc(300px - 30px);
}
=>
.test_03 {
　　width: 300px;
　　height: calc(270px);
}

这个calc，有时候我们是让浏览器计算，不是让less计算

.test_03{
　　width: 300px;
　　height: ~'calc(300px - 30px)';
}
=>
.test_03 {
　　width: 300px;
　　height: calc(300px - 30px);
}