npm install -g less

lessc less/style.less css/style.css

// 变量

@f9color: #f938ab;

.container {

    width: 100%;

    height: 100%;

    border: 1px solid @f9color;

}

变量

// 混合

.clearBox {

    margin:;

    padding:;

    box-sizing: border-box;

}

body,html {

    width: 100%;

    height: 100%;

    .clearBox; // 调用

}

div {

    .clearBox; // 调用

}

混合

.clearfix {

  display: block;

  zoom:;

  &:after { // &表示当前选择器的父代

    content: " ";

    display: block;

    font-size:;

    height:;

    clear: both;

    visibility: hidden;

  }

}

嵌套

.container {

    width: 100%;

    height: 100%;

    border: 1px solid @f9color;

    .screen-color {

        width: 100px;

        height: 100px;

        @media screen {

            background: @f9color;

            @media (min-width: 768px) {

                background: red;

            }

        }

    }

}

嵌套指令并且冒泡

// 放置位置无要求

// 通过Less依赖文件扩展名的方式区别对待不同的文件，.css文件直接按css导入不编译，其他类型文件包括没有扩展名的文件均按.less文件导入并编译

// 不带导入类型的：

@import "common.less";

// 带导入类型的：（只导入一次）

// 导入类型有：

// reference：使用Less文件但不输出

// inline：在输出中包含源文件但不加工它

// less：将文件作为Less文件对象，无论是什么文件扩展名

// css：将文件作为CSS文件对象，无论是什么文件扩展名

// once：只包含文件一次（默认行为）

// multiple：包含文件多次

@import (once) "common.less";

// 选择器使用变量

@bg: bg;

.@{bg} {

    background: @fff;

}

// 编译后：

.bg {

  background: #fff;

}

// 属性使用变量

.position_info (@position: fixed; @propertyOne: top; @propertyOneVal: 0; @propertyTwo: left; @propertyTwoVal: 0) {

    position: @position;

    @{propertyOne}: @propertyOneVal;

    @{propertyTwo}: @propertyTwoVal;

}

// 不传参数调用

.header {

    .position_info; // 不传参数

}

// 编译后

.header {

    position: fixed;

    top: 0;

    left: 0;

}

// 传参数调用

.header {

    .position_info(absolute, bottom, 0, left, 20px); // 传参数

}

// 编译后

.header {

    position: absolute;

    bottom: 0;

    left: 20px;

}

// urls使用变量

@imageUrl: '../image';

.wrap {

    background: url('@{imageUrl}/center.png') no-repeat center;

}

// 编译后

.wrap {

    background: url('../image/center.png') no-repeat center;

}

// 使用

@screen330: ~'(max-width: 330px)';

@screen380: ~'(max-width: 380px) and (min-width: 331px)';

.div {

     width: 300px;

     @media screen and  @screen330 {

         width: 100px;

    }

    @media screen and  @screen380 {

         width: 200px;

    }

}

// 编译后

.div {

  width: 300px;

}

@media screen and (max-width: 330px) {

  .div {

    width: 100px;

  }

}

@media screen and (max-width: 380px) and (min-width: 331px) {

  .div {

    width: 200px;

  }

}

// box-shadow阴影设置，依次为水平阴影的位置、垂直阴影的位置，...表示除了前两个参数外后面可接收参数不限制个数

// 此属性接收0-N个参数，因为前两个参数已有默认值

// @arguments:传入参数太多时，可使用@arguments将全部参数都进行赋值

.box_shadow(@x: 0; @y: 0;...){

    box-shadow: @arguments;

    -webkit-box-shadow: @arguments;

    -moz-box-shadow: @arguments;

    -o-box-shadow: @arguments;

}

@bg: bg;

.@{bg} {

    &:extend(.app); // &表示当前父选择器

    background: @fff;

}

.app {

    background: #fff;

}

// 编译后

.bg {

  background: #fff;

}

.app,

.bg {

  background: #fff;

}