less 初探

官方文档 

## Less 中文网 http://lesscss.cn/

## Less 官网 http://lesscss.org/

---

使用

1.  Use with Node.js:

npm install -g less

lessc styles.less styles.css 

2. browser:

---

主要(常用):

变量（Variables）

混合（Mixins）

嵌套（Nesting）

运算（Operations）

导入（Importing）

作用域（Scope）

Maps

Escaping

注释（Comments）
插件：npm install less-plugin-clean-css

//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" >

---

index.html

   

   

   

   

   

1

   

        2

        haha

   

   

3

   

        Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        Ex aspernatur nobis ipsa quia neque ad corporis deleniti,

        necessitatibus quam voluptatem est rerum numquam doloribus!

        Quo ducimus aperiam accusamus velit sequi!

   

---

main.less

@width: 100%;

@height: 100%;

@color: red;

@white: #fff;

@borderH: 1px;

@left: 15px;

@max768: ~"(max-width: 768px)";

@min320: ~"(min-width: 320px)";

.border-radius (@radius:4px) {

    -moz-border-radius: @radius;

    -webkit-border-radius: @radius;

}

.bordered {

    border-top: dotted 10px black;

    border-bottom: solid 2px black;

}

.container{

    color: @white;

    width: @width;

    height: @height;

    background: @color;

    margin-bottom: 15px;

    .bordered();

}

.container2{

    width: @width;

    height: @height;

    background: @white;

    margin-bottom: 5px;

    span {

        font-size: 24px;

        color: @color;

        &:before {

            content: '';

            display: inline-block;

            width: 6px;

            height: 20px;

            margin-right: @left;

            background: yellow;

        }

        @media @max768 {

            color: blue;

        }

        @media @min320 {

            color: yellow;

        }

    }

    border-top: @borderH+2 solid black;

}

.container3{

    width: @width;

    height: @height;

    background-color: @color;

    margin-bottom: 5px;

    border: 1px solid @color;

    .border-radius(10px);

}