1.注释

less 的注释有两种方法，"/**/" 和 "//"，前一种会在 css 文件中显示，后一种不会在 css 显示。

2.定义变量的方法："@"加上变量名。

@tabbarActiveColor:#26a2ff;

3.运算

@height: 30px;height: @height; // 30pxline-height: @height - 1; // 29px

4.继承  &

"&"符号，这个符号起到继承的作用，这个符号就是它的父级标签(类，id等等)。

.industry-section {    width: 950px;    margin-right: auto;    margin-left: auto;    & > div:not(.heading) {        padding: 40px 150px;        & h3 {            font-size: @fs + 12;            margin-bottom: .5rem;        }        & li {            font-size: @fs + 2;            line-height: 1.6;        }    }    }

相当于

.industry-section {  width: 950px;  margin-right: auto;  margin-left: auto;}.industry-section > div:not(.heading) {  padding: 40px 150px;}.industry-section > div:not(.heading) h3 {  font-size: 28px;  margin-bottom: .5rem;}.industry-section > div:not(.heading) li {  font-size: 18px;  line-height: 1.6;}

5.混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

classA

.page-width {        width: 100%;    max-width: 1920px;    margin-right: auto;    margin-left: auto;}

classB

body {    .page-width;  // classB    font-size: @fs;    color: @text-color;    background-color: #fff;    font-family: "Microsoft Yahei", Arial, sans-serif;}

6.媒体查询

.application-section {    max-width: 100%;    width: 1920px;    height: 770px;    margin: 30px auto;    background: url(../images/app-scene.png) center top no-repeat;    position: relative;    & h2 {        position: absolute;        top: 70px;        left: 50%;                font-size: 0;        width: 1200px;        transform: translateX(-50%);        @media (max-width: 1600px) {            width: 1000px;            & span {                font-size: @fs + 20;            }        }    }}

7.mixins  混合

// 定义一个样式选择器  .borderRadius(@radius){       -moz-border-radius: @radius;       -webkit-border-radius: @radius;       border-radius: @radius;   }    // 使用已定义的样式选择器  #header {       .borderRadius(10px); // 把 10px 作为参数传递给样式选择器  }   .btn {       .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器}

默认值

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

8.function

less 包含许多内置函数

/*把像素转成rem  375/10  = 37.5  375 它是ipone6的屏幕宽度  注:将屏幕分成10等份,10rem为屏幕宽度  例如：  .slide-pages {    position: absolute;    .bottom(10);    .right(15);  }*/.fs(@px){  font-size: unit(@px/37.5,rem);}.w(@px){  width: unit(@px/37.5,rem);}.h(@px){  height: unit(@px/37.5,rem);}.lh(@px){  line-height: unit(@px/37.5,rem);}.pl(@px){  padding-left: unit(@px/37.5,rem);}.pr(@px){  padding-right: unit(@px/37.5,rem);}.pt(@px){  padding-top: unit(@px/37.5,rem);}.pb(@px){  padding-bottom: unit(@px/37.5,rem);}.mt(@px){  margin-top:unit(@px/37.5,rem);;}.mb(@px){  margin-bottom:unit(@px/37.5,rem);}.ml(@px){  margin-left:unit(@px/37.5,rem);}.mr(@px){  margin-right:unit(@px/37.5,rem);}.top(@px){  top:unit(@px/37.5,rem);}.bottom(@px){  bottom:unit(@px/37.5,rem);}.left(@px){  left:unit(@px/37.5,rem);}.right(@px){  right:unit(@px/37.5,rem);}.padding(@tb,@lr){  padding: unit(@tb/37.5,rem) unit(@lr/37.5,rem);;}.fl{  float: left;}.fr{  float: right;}.clearfix{  clear: both;}

自定义

variable.less

/*把像素转成rem  375/10  = 37.5  375 它是ipone6的屏幕宽度  注:将屏幕分成10等份,10rem为屏幕宽度  例如：  .slide-pages {    position: absolute;    .bottom(10);    .right(15);  }*/// 字号.fs(@px){  font-size: unit(@px/36,rem);  [data-dpr='2'] & {    font-size: unit(@px/36,rem) * 2;  }  [data-dpr='3'] & {    font-size: unit(@px/36,rem) * 3;  }}// 宽度.w(@px){  width: unit(@px/36,rem);}// 高度.h(@px){  height: unit(@px/36,rem);}// 行高.lh(@px){  line-height: unit(@px/36,rem);}// 内边距.pl(@px){  padding-left: unit(@px/36,rem);}.pr(@px){  padding-right: unit(@px/36,rem);}.pt(@px){  padding-top: unit(@px/36,rem);}.pb(@px){  padding-bottom: unit(@px/36,rem);}.p2(@ptb,@prl){  padding: unit(@ptb/36,rem) unit(@prl/36,rem);}.p3(@pt,@pm,@pb){  padding: unit(@pt/36,rem) unit(@pm/36,rem) unit(@pb/36,rem);}.p4(@pt,@pr,@pb,@pl){  padding: unit(@pt/36,rem) unit(@pr/36,rem) unit(@pb/36,rem) unit(@pl/36,rem);}// 外边距.mt(@px){  margin-top:unit(@px/36,rem);;}.mb(@px){  margin-bottom:unit(@px/36,rem);}.ml(@px){  margin-left:unit(@px/36,rem);}.mr(@px){  margin-right:unit(@px/36,rem);}.m2(@mtb,@mrl){  margin:unit(@mtb/36,rem) unit(@mrl/36,rem);}.m3(@mt,@mm,@mb){  margin:unit(@mt/36,rem) unit(@mm/36,rem) unit(@mb/36,rem);}.m4(@mt,@mr,@mb,@ml){  margin:unit(@mt/36,rem) unit(@mr/36,rem) unit(@mb/36,rem) unit(@ml/36,rem);}.ma(@mt,@mb){  margin:unit(@mt/36,rem) auto unit(@mb/36,rem);}// 距离.t(@px){  top:unit(@px/36,rem);}.b(@px){  bottom:unit(@px/36,rem);}.l(@px){  left:unit(@px/36,rem);}.r(@px){  right:unit(@px/36,rem);}// 浮动.fl{  float: left;}.fr{  float: right;}// 清除浮动.clearfix{  clear: both;}// 圆角.br(@px){  border-radius: unit(@px/36,rem);}// 背景.bs(@width,@height){  background-size:unit(@width/36,rem) unit(@height/36,rem);}.bp(@left,@top){  background-position:unit(@left/36,rem) unit(@top/36,rem);}// 边框.b(@px,@type,@color){  border: unit(@px/36,rem) @type @color;}/** * 解决1px问题 */// 顶部.border-top-1px(@color) {  position: relative;  &:after {    display: block;    position: absolute;    left: 0;    bottom: 0;    width: 100%;    border-bottom: 1px solid @color;    content: ' ';  }}// 底部.border-bottom-1px(@color) {  position: relative;  &:after {    display: block;    position: absolute;    left: 0;    bottom: 0;    width: 100%;    border-bottom: 1px solid @color;    content: ' ';  }}

9.继承  extend

.animal{　　color: #fff;}/* 语法1：
     
      :extend(
      
       ){} */.bear:extend(.animal){　　width: 100px;　　height: 100px;}/* 语法2：
       
        { &:extend(
        
         ); } */.deer{　　&:extend(.animal);　　width: 50px;　　height: 50px;}
        
       
      
     

10.引入  @import

@import "main.less";

.